Page 1 sur 2

Affichage info dans menu déroulant dynamique

Posté : 21 août 2014, 10:40
par Hich9
Bonjour,
Je vous remercie d'abord de me prendre le temps de vous pencher sur mon problème.
Voila, J'ai créé un formulaire qui permet de remplir une table d'une base de donnée, comme montré sur la capture d'écran ci-dessous, on peut ajouter un projet, et sa description, l'ID du projet quant à lui est incrémenté automatiquement.
En dessous du premier formulaire se trouve un autre qui permet de modifier une ligne de la table en choisissant l'ID.
Ce que je voudrai faire, c'est qu'une fois que l'on choisis un ID, les infos relatives à cet ID s'affichent dans le formulaire. Par exemple si l'ID 1 corresponds au projet 1 et à la description 1, que cela s'affiche et que l'on puisse modifier, cela sera plus simple pour l'utilisateur. Comment pourrais-je faire ?
Je vous invite à trouver ci-dessous une capture d'écran et le code source de ma page.

Merci beaucoup pour votre aide

Image

Code source :

Code : Tout sélectionner

<link href="css/stylex.css" rel="stylesheet" type="text/css"> <link href="css/styleform.css" rel="stylesheet" type="text/css"> <div class="thefirst"><?php include("fonctions.php"); ?> <html> <head><title> Formulaire de Saisie </title></head> <body> <?php connectMaBase(); //requête SQL: $sql = "SELECT * FROM T_PRO"; //exécution de la requête: $requete = mysql_query($sql) or die( mysql_error()); ?> <h2> Ajouter Projet </h2> <div class="formpro"> <form name="form" id="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data"> <TABLE BORDER="1"> <TR> <TH>Projet</TH> <TH>Description</TH> <TR> <TD><input type="text" name="nomprojet"/></TD> <TD><input type="text" name="description"/></TD> </TR> </table> </div> <div class="submitpro"> <input type="submit" id="submit" name="submit" value="OK" /> <a href="ajoutertache.php" target="main"><input type="button" value="suivant"> </a> </form> </div> </br><br> </br> <div align="left"><h2> Modifier un Projet </h2></div> <div class="formprom"> <form name="form" id="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data"> <TABLE BORDER="1"> <TR> <TH>ID</TH> <TH>Projet</TH> <TH>Description</TH> <TR> <TD> <select name="idselect" id="idselect"> <?php while ($result = mysql_fetch_array($requete)) { echo '<option value="'.$result['ID_PRO'].'">'.$result['ID_PRO'].'</option> ' ; // } ?> </TD> <TD><input type="text" name="nomprojetm"/></TD> <TD><input type="text" name="descriptionm"/></TD> </TR> </table></div> <div class="submitprom"> <input type="submit" id="submitm" name="submitm" value="Modifier" /> </form> </div> </br> <?php if (isset ($_POST['submit'])){ //On récupère les valeurs entrées par l'utilisateur : $nomprojet=$_POST['nomprojet']; $description=$_POST['description']; //On se connecte connectMaBase(); //On prépare la commande sql d'insertion $sql = 'INSERT INTO T_PRO VALUES("","'.$description.'","'.$nomprojet.'")'; /*on lance la commande (mysql_query) et au cas où, on rédige un petit message d'erreur si la requête ne passe pas (or die) (Message qui intègrera les causes d'erreur sql)*/ mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error()); // on ferme la connexion mysql_close(); } ?> <?php if (isset ($_POST['submitm'])){ //On récupère les valeurs entrées par l'utilisateur : $idselect=$_POST['idselect']; $nomprojetm=$_POST['nomprojetm']; $descriptionm=$_POST['descriptionm']; //On se connecte connectMaBase(); //On prépare la commande sql d'insertion $sql = "update T_PRO set Projet_description='".$descriptionm."',Projet='".$nomprojetm."' where ID_PRO='".$idselect."'"; // $sql = 'INSERT INTO T_PRO VALUES("","'.$description.'","'.$nomprojet.'")'; /*on lance la commande (mysql_query) et au cas où, on rédige un petit message d'erreur si la requête ne passe pas (or die) (Message qui intègrera les causes d'erreur sql)*/ mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error()); // on ferme la connexion mysql_close(); } ?> </br> <div align='left' style="margin-left: 10px;"><div class="resultpro"> <?php connectMaBase(); $sql = 'SELECT * FROM T_PRO'; $result = mysql_query($sql); if(false !== $result) { if(mysql_num_rows($result) > 0) { echo '<table border="1">'; $row = mysql_fetch_assoc($result); echo '<tr><th>', implode('</th><th>', array_keys($row)), '</th></tr>'; do { echo '<tr><td>', implode('</td><td>', $row), '</td></tr>'; } while($row = mysql_fetch_row($result)); echo '</table>'; } mysql_free_result($result); } ?></div></br></br></br></div>

Re: Affichage info dans menu déroulant dynamique

Posté : 21 août 2014, 10:52
par benv8nam
Tu dois faire un traitement ajax qui au choix de ton id va rechargé la div affichant le nom et la description du projet.

Re: Affichage info dans menu déroulant dynamique

Posté : 21 août 2014, 11:39
par Hich9
Merci pour ta réponse benv8nam !
N'y a-t-il pas moyen de réaliser ça en PHP où est-ce plus aisé de le faire en Ajax ??

Re: Affichage info dans menu déroulant dynamique

Posté : 21 août 2014, 12:25
par Elie
L'ajax ca appelle du PHP quoi :)
Sauf que ca ne recharge pas la page.

Donc si pour toi "Recharger la page" n'est pas un soucis, tu peux le faire tres facilement en donnant l'information que quand une valeur est selectionner dans le select cela raffraichi la page.

Choisi ce que tu veux et apres on t'aiguille !

Re: Affichage info dans menu déroulant dynamique

Posté : 21 août 2014, 12:26
par Aureusms
C'est plus facile de le faire en Ajax car le PHP ne peut pas traiter le "côté client".
Si tu ne veux pas faire d'Ajax, tu peux "émettreé en PHP tous les tableaux puis les afficher au choix de l'utilisateur. C'est quand même plus compliqué.

Maintenant, l'ajax est devenu assez facile d'utilisation, surtout depuis que des librairies l'ont simplifié. Je pense notamment à Jquery.
Si on reprend ton select appellé "Idselect" (où je ne vois pas de balise fermante d'ailleurs, je l'ai rajouté ...) :

L'HTML :
 <TD> 
	<select name="idselect" id="idselect">
	<?php
	while ($result = mysql_fetch_array($requete)) {
		echo '<option value="'.$result['ID_PRO'].'">'.$result['ID_PRO'].'</option> ' ;  //
	}
	?> 
	</select>
</TD>
Le javascript :
[javascript]$(document).on({
change : function () {
//on créé un tableau qu'on nomme "resultat" et on lui ajoute les en-têtes
var tab = document.createElement('table');
$(tab).addClass('resultat').append('<tr><th>ID PRO</th><th>Projet Description</th><th>Projet</th>');
//on va rechercher les valeurs sur le serveur
$.ajax ({
url : "serveur.php",
data : {id : $(this).val()},
type : "post",
cache : false,
complete : function (xhr, result) {
if (result != "success") return;
var reponse = xhr.responseText;
var ligne = $(reponse).find('LIGNE');
$(ligne).each(function () {
$(tab).append('<tr><td>'+$(ligne).children('ID_PRO')+'</td><td>'+$(ligne).children('PROJET_DESCRIPTION')+'</td><td>'+$(ligne).children('Projet')+'</td></tr>');
});
$(tab).appendTo('body');
}
});
}
},'#idselect');[/javascript]

Le PHP serveur.php
<?php
//fichier serveur.php
$id = (!empty($_POST["id"]) && is_numeric($_POST["id"])) ? intval($_POST["id"]) : false;
//si id n'est pas un nombre positif => sortie
if (empty($id))
	die('L\'id n\'est pas le bon type');
	
$mysqli = new mysqli("localhost", "user", "password", "database");
if ($mysqli->connect_errno) {
    die("Echec lors de la connexion à MySQL : (" . $mysqli->connect_errno . ") " . $mysqli->connect_error);
}
$sql = "SELECT idPro, ProjetDescription, Projet From table where id = ".$id;
$mysqli->real_escape_string($sql); //protection injection Sql
if (!$resultat = $mysqli->query($sql)) {
	die ('Erreur dans la requête : (' . $mysqli->errno . ') ' . $mysqli->error);
}

if ($resultat->num_rows == 0) {
	die ('Pas de résultats avec l\'id : '.$id);
}

$xmlStr = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><DONNEES>';	
while ($s = $resultat->fetch_assoc ()) :
	$xmlStr .= '<LIGNE><ID_PRO>'.$s["idPro"].'</ID_PRO><PROJET_DESCRIPTION>'.$s["ProjetDescription"].'</PROJET_DESCRIPTION><PROJET>'.$s["Projet"].'</PROJET></LIGNE>';	
endwhile;	
$xmlStr = '</DONNEES>';	
header ("Content-Type:text/xml");
echo $xmlStr;
?>

Re: Affichage info dans menu déroulant dynamique

Posté : 29 août 2014, 14:31
par Hich9
Bonjour
Veuillez m'excuser pour le temps de réponse,
Merci pour votre aide, j'ai pu réaliser cela en AJAX suivant les recommandations d'Aureusms.
J'ai une toute dernière question, comment peut-on rendre ces champs récupérés modifiables ? c'est à dire mettre un input dans un select ?

Merci d'avance pour vos réponses

Re: Affichage info dans menu déroulant dynamique

Posté : 29 août 2014, 20:20
par Elie
Bah tu peux pas mettre un input dans un select... Donc met autant d'input que de réponse non ?

Re: Affichage info dans menu déroulant dynamique

Posté : 01 sept. 2014, 08:27
par Aureusms
Ce que tu veux est rajouter une balise <OPTION> dans la liste d'un <SELECT> ?

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 10:17
par Hich9
Bonjour,
Je vous explique :
Image
Ci-dessous, lorsque je récupère les infos suivant un ID(s) je ne peux pas les modifier ... or si j'utilise cette fonction c'est pour pouvoir modifier des lignes en tables ...
quelqu'un aurait un bout de réponse ? aurez-vous besoin du code ?

Merci infiniment

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 10:37
par Aureusms
Grosso modo en quarte Ajax tu fais le taf :
Le premier en fonction de l'ID_SI
Le second, dès que l'ID_SI est choisi => menu Dispo Réseau, etc
Le troisième qui indique la description éventuelle.
Le dernier t'indiquant "en cours pas en cours", ...

En clair quatre fonctions ajax feront l'affaire qui peuvent intéroger la même page PHP derrière que tu tri en fonction d'un paramètre POST par exemple.

Par exemple :
[javascript]$(document).on({
change : function () {
...
$.ajax ({
url : "serveur.php",
data : {id : $(this).val(), name : 'ID_SI'},
...[/javascript]
Ici tu envoies la valeur id pour le tableau ID_SI
<?php
//fichier serveur.php
$id = (!empty($_POST["id"]) && is_numeric($_POST["id"])) ? intval($_POST["id"]) : false;
$name = (!empty($_POST["name"])) ? $_POST["name"] : false;

//on fixe les variables name attendue
$tabName = array ("ID_SI", "DESC");
if (!in_array($name,$tabName))
        die('Le nom n\' a pas été reconnu');

//si id n'est pas un nombre positif => sortie
if (empty($id))
        die('L\'id n\'est pas le bon type');
       
$mysqli = new mysqli("localhost", "user", "password", "database");
if ($mysqli->connect_errno) {
    die("Echec lors de la connexion à MySQL : (" . $mysqli->connect_errno . ") " . $mysqli->connect_error);
}

//on recherche quoi faire en fonction du name envoyé
switch ($name) :
        default :
        die('Le nom n\' a pas été reconnu');
        break;

        case "ID_SI" :
        $sql = "SELECT idPro, ProjetDescription, Projet From table where id = ".$id;
        $mysqli->real_escape_string($sql); //protection injection Sql
        if (!$resultat = $mysqli->query($sql)) {
                die ('Erreur dans la requête : (' . $mysqli->errno . ') ' . $mysqli->error);
        }

        if ($resultat->num_rows == 0) {
                die ('Pas de résultats avec l\'id : '.$id);
        }

        $xmlStr = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><DONNEES>';   
        while ($s = $resultat->fetch_assoc ()) :
                $xmlStr .= '<LIGNE><ID_PRO>'.$s["idPro"].'</ID_PRO><PROJET_DESCRIPTION>'.$s["ProjetDescription"].'</PROJET_DESCRIPTION><PROJET>'.$s["Projet"].'</PROJET></LIGNE>';     
        endwhile;      
        $xmlStr = '</DONNEES>';
        header ("Content-Type:text/xml");
        echo $xmlStr;
        exit;
        break;

        case "DESC" :
        ...
        break;
endswitch;
?>
L'avantage est que tu gères tout sur une même page.
Le fait de fixer les "names" attendus via la vérification in_array te permet de vérifier ce que l'utilisateur envoie (on ne sait jamais).
Ensuite tu fixes la sortie en sortie universelle XML (même nom de colonne) pour afficher les options dans le select voulu.

Dès que "VALIDER" a été choisi => affichage du tableau générale avec un autre Ajax indépendant mais qui peux pointer vers la même page serveur.php.

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 11:16
par Hich9
Bonjour Aureusms
Merci beaucoup pour ta réactivité,
Là j'arrive à récupérer les infos suivant l'ID, j'ai pu le faire grâce à ta première réponse.
Cependant, c'est que je souhaiterai récuperer les infos dans un "input" ('fin je sais pas comment le dire), mais récupérer les infos dans un champ modifiable ..
est-ce possible ?

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 11:26
par Aureusms
Oui tu peux récupérer la valeur dans un input via la la fonction jquery val() :
<input type="text" value="essai" name="ID_SI_DESCRIPTION" class="input" />
[javascript]$(document).on({
//dès la perte de focus de tous les input qui ont la class "input"
focusout : function () {
$.ajax ({
url : "serveur.php",
data : {name : $(this).attr('name'), value : $(this).val()},
type : "post",
cache : false,
complete : function (xhr, result) {
alert ('le nom : '+data.name+" et la valeur : "+data.value+" ont été envoyées et réceptionnées sur le serveur dès la perte de focus");
}
});
}
},'input.class');[/javascript]

Comme cela, tu peux traiter tous les input avec la classe input à la volée.

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 11:43
par Hich9
Merci une nouvelle fois pour ton aide !!!
Image
Je n'arrive à afficher les valeurs récupérer dans l'input ... genre ici par exemple, je souhaiterai afficher SYPEL1 qui est récupérée en base à la place d'"essai" ....

(excuses moi si je te pose trop de questions je débute ...)

Mon code
Page testajax.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Exemple d'une liste liée en AJAX</title>
<meta name="Description" content="Exemple d'une liste liée en AJAX." />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="fonctions.js"></script>
</head>
 
<body>
 
<div id="centre">
 
<h1>liste liée</h1>
 
<form method="post" name="liste">
<label>ID_SI : </label>
<select name="region" id="region" onchange="Departements(this.value);">
<?php
//Variable de connexions BDD
$nom_du_serveur ="127.0.0.1";
$nom_de_la_base ="********";
$nom_utilisateur ="root";
$passe ="";
 
//Connexion à la base de données
mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
//Vérification d'accès à la base de données
mysql_select_db("$nom_de_la_base")  or die ('Erreur :'.mysql_error());
 
//On sélectionne toutes les régions
$selectregion = mysql_query("SELECT ID_SI,SI FROM T_SI ORDER BY ID_SI") or die (mysql_error());
while($donnees = mysql_fetch_array($selectregion))
{
    echo '<option value="'.$donnees['ID_SI'].'"';
    if(isset($_POST["region"]) && $_POST["region"]==$donnees['ID_SI']){echo " selected";}
    echo '>'.$donnees['ID_SI'].'</option>';
}
?>
</select><br/>
 
<!-- Dans ce bloc sera affiché la liste des départements -->
<div id="blocDepartements">
<?php
/*Pour garder la sélection de la seconde liste, on l'inclue directement dans la page lors de la validation du formulaire*/
if(isset($_POST['region'])){
//on créer une variable utilisé dans la page "traitement.php"
$include = 1;
//on inclue la page
include('traitement.php');
}
?>



</div>
<!-- Fin du bloc des départements -->
 
<label>Valider : </label>
<input type="submit" name="Valider" value="Valider"/>
<input type="reset" name="Effacer" value="Effacer"/>
</form>
 <?php
//Le formulaire a été posté
if(isset($_POST["Valider"])){
//Régions  vide
    if(isset($_POST["region"]) && $_POST["region"] == 'vide'){
        echo '<div id="erreur">Veuillez sélectionner une région!</div>';
    }
//Départements vide
    else if(isset($_POST["departement"]) && $_POST["departement"] == 'vide'){
        echo '<div id="erreur">Veuillez sélectionner un département!</div>';
    }
//Tout est ok
    else{
        //On va chercher le nom de la région sélectionné
        $affichetregions = mysql_query("SELECT ID_SI FROM T_SI WHERE ID_SI='".mysql_real_escape_string($_POST["region"])."'") or die (mysql_error());
        $donneesregions = mysql_fetch_assoc($affichetregions);
 
        //On va chercher le nom du département sélectionné
        $affichedepartements = mysql_query("SELECT SI FROM T_SI WHERE ID_SI='".mysql_real_escape_string($_POST["region"])."'") or die (mysql_error());
        $donneesdepartements = mysql_fetch_assoc($affichedepartements);
 
        $affichedescription = mysql_query("SELECT SI_description FROM T_SI WHERE ID_SI='".mysql_real_escape_string($_POST["region"])."'") or die (mysql_error());
        $donneesdescription = mysql_fetch_assoc($affichedescription);
 
 
        //On affiche le résultat
  echo '<div id="info">Vous avez sélectionné la région '.$donneesregions['ID_SI'].' et le département '.$donneesdepartements['SI'].' ainsi que la description '.$donneesdescription['SI_description'].'</div>';
    }
}
?>
</div>
 
</body>
</html>
page traitement.php
<?php
//Numéro de la région
if(isset($_POST["region"]) && $_POST["region"] != 'vide'){
/*Si la variable $include n'existe pas c'est que le numéro de la région passe par AJAX. On a donc besoin d'avoir une connexion avec la base de données.*/
/*Quand on poste le formulaire, cette page est inclue directement dans le div "blocDepartements", donc la connexion est inutile.*/
/*Si on inlcue cette page au moment de la validation, c'est uniquement pour garder la sélection "selected" de la liste.*/
if(!isset($include)){
//On indique le Content-Type utilisé
header('Content-Type: text/html; charset="iso-8859-1"');
 
//Connexion à la base de données
mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
//Vérification d'accès à la base de données
mysql_select_db("$nom_de_la_base") or die ('Erreur :'.mysql_error());
// echo '<div id="reponse">La variable $_POST["region"] provient d\'AJAX.</div>';
}
else{
// echo '<div id="reponse">La variable $_POST["region"] provient de l\'include.</div>';
}
?>
 
<label>SI : </label>
<input type="text" value="essai" name="departement" class="input" />
<?php
//On sélectionne les départements en fonction du numéro de la région
$selectdepartement = mysql_query("SELECT SI FROM T_SI WHERE ID_SI=".mysql_real_escape_string($_POST["region"])." ORDER BY ID_SI") or die (mysql_error());
//On boucle
while($donnees = mysql_fetch_assoc($selectdepartement))
{
echo '<option value="'.$donnees['SI'].'"';
if(isset($_POST["departement"]) && $_POST["departement"]==$donnees['SI']){ echo " selected"; }
echo '>'.$donnees['SI'].'</option>';
}
?>
</input>
<label>Description : </label>
<select name="description" id="description">
<?php
//On sélectionne les départements en fonction du numéro de la région
$selectdepartement = mysql_query("SELECT SI_description FROM T_SI WHERE ID_SI=".mysql_real_escape_string($_POST["region"])." ORDER BY ID_SI") or die (mysql_error());
//On boucle
while($donnees = mysql_fetch_assoc($selectdepartement))
{
echo '<option value="'.$donnees['SI_description'].'"';
if(isset($_POST["departement"]) && $_POST["departement"]==$donnees['SI_description']){ echo " selected"; }
echo '>'.$donnees['SI_description'].'</option>';
}
?>
</select>
<select name="description" id="description">
<?php
//On sélectionne les départements en fonction du numéro de la région
$selectdepartement = mysql_query("SELECT SI_statut FROM T_SI WHERE ID_SI=".mysql_real_escape_string($_POST["region"])." ORDER BY ID_SI") or die (mysql_error());
//On boucle
while($donnees = mysql_fetch_assoc($selectdepartement))
{
echo '<option value="'.$donnees['SI_statut'].'"';
if(isset($_POST["departement"]) && $_POST["departement"]==$donnees['SI_statut']){ echo " selected"; }
echo '>'.$donnees['SI_statut'].'</option>';
}
?>
</select>


<br/>
<?php } ?>

fichier fonctions.js
[javascript]//Fonction d'Instance
function objet_XMLHttpRequest()
{
var xhr = null;

if (window.XMLHttpRequest || window.ActiveXObject){
if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else{
xhr = new XMLHttpRequest();
}
}
else{
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
return xhr;

$(document).on({
//dès la perte de focus de tous les input qui ont la class "input"
focusout : function () {
$.ajax ({
url : "testajax.php",
data : {name : $(this).attr('name'), value : $(this).val()},
type : "post",
cache : false,
complete : function (xhr, result) {
alert ('le nom : '+data.name+" et la valeur : "+data.value+" ont été envoyées et réceptionnées sur le serveur dès la perte de focus");
}
});
}
},'input.class');
}

[/javascript]

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 11:48
par Aureusms
As tu firebug ? Développes tu sous firefox (je te le conseille au moins pour ta vie privée) ?
Si tu tapes SYPEL1 dans l'input et que tu en sors, que se passe-t-il ?

(après je dois bosser une peu donc je te répondrai que ce soir)

Re: Affichage info dans menu déroulant dynamique

Posté : 02 sept. 2014, 11:52
par Hich9
Oui je développes sous firefox ...
Quand je tape SYPEL1, ça me selectionne la valeur en bas comme sur l'image ci-dessous :

Image