Affichage info dans menu déroulant dynamique

par **Aureusms** » 02 sept. 2014, 11:56

Mais es-tu dans l'input avant ?
C'est bizarre ton truc ?

par **Hich9** » 02 sept. 2014, 11:52

Oui je développes sous firefox ...
Quand je tape SYPEL1, ça me selectionne la valeur en bas comme sur l'image ci-dessous :

par **Aureusms** » 02 sept. 2014, 11:48

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)

par **Hich9** » 02 sept. 2014, 11:43

Merci une nouvelle fois pour ton aide !!!

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]

par **Aureusms** » 02 sept. 2014, 11:26

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.

par **Hich9** » 02 sept. 2014, 11:16

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 ?

par **Aureusms** » 02 sept. 2014, 10:37

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.

par **Hich9** » 02 sept. 2014, 10:17

Bonjour,
Je vous explique :

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

par **Aureusms** » 01 sept. 2014, 08:27

Ce que tu veux est rajouter une balise <OPTION> dans la liste d'un <SELECT> ?

par **Elie** » 29 août 2014, 20:20

Bah tu peux pas mettre un input dans un select... Donc met autant d'input que de réponse non ?

par **Hich9** » 29 août 2014, 14:31

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

par **Aureusms** » 21 août 2014, 12:26

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;
?>

par **Elie** » 21 août 2014, 12:25

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 !

par **Hich9** » 21 août 2014, 11:39

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 ??

par **benv8nam** » 21 août 2014, 10:52

Tu dois faire un traitement ajax qui au choix de ton id va rechargé la div affichant le nom et la description du projet.

Affichage info dans menu déroulant dynamique

Répondre

Étendre la vue Revue du sujet : Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique

Re: Affichage info dans menu déroulant dynamique