IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Listes déroulantes liées et affichage de formulaires


Sujet :

AJAX

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut [AJAX] Listes déroulantes liées et affichage de formulaires
    Salut à tous, j’ai réalisé trois listes déroulantes qui sont liées. Je souhaiterais qu’au bout du 3ème choix de l’utilisateur, un formulaire ou tableau prédéfini qui est en "hidden" puisse être affiché. Il existe plusieurs tableaux, et l’affichage du tableau est fonction du choix opéré dans la 3ème liste déroulante. Comment lier chaque choix au formulaire indiqué ?
    Comme vous le verrez, j’utilise une base de données pour afficher les éléments composant mes listes déroulantes.
    Ci-dessous le script réalisé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <title>CALCUL DES QUANTITES</title>
    <script type='text/javascript '>
    function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest();
    else if(window.ActiveXObject){ // Internet Explorer
    try {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    xhr = false;
    }
    return xhr;
    }
    /**
    * Méthode qui sera appelée sur le click du bouton
    */
    function go_prix(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('prix').innerHTML = leselect;
    }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","quantite_prix.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de la section
    sel = document.getElementById('section');
    fk_sectionprix = sel.options[sel.selectedIndex].value;
    xhr.send("fk_sectionprix="+fk_sectionprix);
    }
     
    function go_sousprix(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('sousprix').innerHTML = leselect;
    }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","quantite_sousprix.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id du prix
    sel = document.getElementById('prix');
    fk_prixsousp = sel.options[sel.selectedIndex].value;
    xhr.send("fk_prixsousp="+fk_prixsousp);
    }
     
    </script>
    </head>
    <body>
    <form>
     
    <fieldset style="width: 1100px" align="">
    <legend>Calcul des Quantités </legend>
    <table align="center" border="1">
    <tr>
    	<th>SECTION </th>
    	<td><select name='section' id='section' onchange='go_prix()'>
    		<option value='-1'>Choisir une section</option> 
    			<?php
    				mysql_connect("localhost","root","");
    				mysql_select_db("madb");
    				$res = mysql_query("SELECT * FROM section ORDER BY idsection");
    				while($row = mysql_fetch_assoc($res))
    				{
    					echo "<option value='".$row["idsection"]."'>".$row["libsection"]."</option>";
    				}
    			?>
    	</td></select> 
    </tr>
     
    <tr>
    <th>PRIX </th>
    	<td><select name='prix' id="prix" onchange = 'go_sousprix()'>
    		<option value='-1'>Choisir un prix</option>
    			<?php
    				mysql_connect("localhost","root","");
    				mysql_select_db("madb");
    				$resa = mysql_query("SELECT * FROM prix ORDER BY idprix");
    				while($rowa = mysql_fetch_assoc($resa))
    				{
    					echo "<option value='".$rowa["idprix"]."'>".$rowa["libprix"]."</option>";
    				}
    			?>
    	</td></select> 
    </tr>
     
    <tr>	
    <th>SOUSPRIX </th>
    		<td><select name='sousprix' id="sousprix" onchange = 'go_sousprix()'>
    			<option value='-1'>Choisir un sous prix</option>
    		</td></select>
    </div>
    <tr>
     
    </table>
    </fieldset>
    </form>
     
    </body>
    </html>
    Requête d'affichage des éléments de la 2ème liste déroulante
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    echo " <select name='prix'>";
    if(isset($_POST["fk_sectionprix"])){
    mysql_connect("localhost","root","");
    mysql_select_db("madb");
    $res = mysql_query("SELECT idprix, libprix FROM prix
    WHERE fk_sectionprix=".$_POST["fk_sectionprix"]." ORDER BY idprix");
    while($row = mysql_fetch_assoc($res)){
    echo "<option value='".$row["idprix"]."'>".$row["libprix"]."</option>";
    }
    }
    echo "</select>";
    ?>

    Requête d'affichage des éléments de la 3ème liste déroulante
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    echo " <td> <select name='sousprix'>";
    if(isset($_POST["fk_prixsousp"])){
    mysql_connect("localhost","root","");
    mysql_select_db("madb");
    $res = mysql_query("SELECT idsousprix, libsousprix FROM sousprix
    WHERE fk_prixsousp=".$_POST["fk_prixsousp"]." ORDER BY idsousprix");
    while($row = mysql_fetch_assoc($res)){
    echo "<option value='".$row["idsousprix"]."'>".$row["libsousprix"]."</option>";
    }
    }
    echo "</select> </td>";
    ?>

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Bonjour,

    C'est le conteneur du select que tu dois modifier l'attribut innerHTML, pas le select lui même. Dans ton cas, c'est la balise td.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    echo " <select name='prix'>";
    Le select généré perd l'id et n'appelle plus la fonction ajax dans le onchange.

    A+.

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut
    Andry.aime, je ne te comprends pas trop bien. J'ai enlevé la balise "td" mais le résultat est le meme.

  4. #4
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Non, c'est le td que tu faits un innerHTML mais pas le select, il ne fallait pas les retirer.

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('idDuTdIci').innerHTML = leselect;

    A+.

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut
    soit je comprends pas ce dont andry.aime veut parler soit il y'a quelquechose qui cloche parce que j'ai suivi ces instructions mais rien ...

  6. #6
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut
    Citation Envoyé par andry.aime Voir le message
    Non, c'est le td que tu faits un innerHTML mais pas le select, il ne fallait pas les retirer.

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('idDuTdIci').innerHTML = leselect;

    A+.
    voici ce que j'ai fait en me basant sur la proposition de andry.aime
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('idsousprix').innerHTML = leselect;
    mais rien ... absolument rien.

  7. #7
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td id="idDuTdIci"><select name='prix' id="prix" onchange = 'go_sousprix()'>
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('idDuTdIci').innerHTML = leselect;

    A+.

  8. #8
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut
    Salut à andry.aime et à tous les amis!!!
    Le résultat est toujours identique malheureusement.

  9. #9
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Peut-tu nous montrer le code html généré de la page contenant les select et les fichiers php appelés que tu as maintenant?

    A+.

  10. #10
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut
    ci-dessous le script réalisé en tenant compte de tes remarques

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CALCUL DES QUANTITES</title>
    <script type='text/javascript '>
    function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest();
    else if(window.ActiveXObject){ // Internet Explorer
    try {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    xhr = false;
    }
    return xhr;
    }
    /**
    * Méthode qui sera appelée sur le click du bouton
    */
    function go_prix(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('idprix').innerHTML = leselect;
    }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","quantite_prix.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id de la section
    sel = document.getElementById('section');
    fk_sectionprix = sel.options[sel.selectedIndex].value;
    xhr.send("fk_sectionprix="+fk_sectionprix);
    }
     
    function go_sousprix(){
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4 && xhr.status == 200){
    leselect = xhr.responseText;
    // On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('idsousprix').innerHTML = leselect;
    }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","quantite_sousprix.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id du prix
    sel = document.getElementById('prix');
    fk_prixsousp = sel.options[sel.selectedIndex].value;
    xhr.send("fk_prixsousp="+fk_prixsousp);
    }
     
    </script>
    </head>
    <body>
    <form>
     
    <fieldset style="width: 1100px" align="">
    <legend>Calcul des Quantités </legend>
    <table align="center" border="1">
    <tr>
    	<th>SECTION </th>
    	<td><select name='section' id='section' onchange='go_prix()'>
    		<option value='-1'>Choisir une section</option> 
    			<?php
    				mysql_connect("localhost","root","");
    				mysql_select_db("madb");
    				$res = mysql_query("SELECT * FROM section ORDER BY idsection");
    				while($row = mysql_fetch_assoc($res))
    				{
    					echo "<option value='".$row["idsection"]."'>".$row["libsection"]."</option>";
    				}
    			?>
    	</td></select> 
    </tr>
     
    <tr>
    <th>PRIX </th>
    	<td id='idprix'><select name='prix' id='prix' onchange = 'go_sousprix()'>
    		<option value='-1'>Choisir un prix</option>
    			<?php
    				mysql_connect("localhost","root","");
    				mysql_select_db("madb");
    				$resa = mysql_query("SELECT * FROM prix ORDER BY idprix");
    				while($rowa = mysql_fetch_assoc($resa))
    				{
    					echo "<option value='".$rowa["idprix"]."'>".$rowa["libprix"]."</option>";
    				}
    			?>
    	</td></select> 
    </tr>
     
    <tr>	
    <th>SOUSPRIX </th>
    		<td id='idsousprix'><select name='sousprix' id='sousprix' onchange = 'go_sousprix()'>
    			<option value='-1'>Choisir un sous prix</option>
    		</td></select>
    </div>
    <tr>
     
    </table>
    </fieldset>
    </form>
     
    </body>
    </html>
    Requête permettant d'acceder aux éléments de la 2ème liste déroulante
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    echo " <select name='prix'>";
    if(isset($_POST["fk_sectionprix"])){
    mysql_connect("localhost","root","");
    mysql_select_db("mabd");
    $res = mysql_query("SELECT idprix, libprix FROM prix
    WHERE fk_sectionprix=".$_POST["fk_sectionprix"]." ORDER BY idprix");
    while($row = mysql_fetch_assoc($res)){
    echo "<option value='".$row["idprix"]."'>".$row["libprix"]."</option>";
    }
    }
    echo "</select>";
    ?>

    Requête permettant d'acceder aux éléments de la 3ème liste déroulante
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    echo " <td> <select name='sousprix'>";
    if(isset($_POST["fk_prixsousp"])){
    mysql_connect("localhost","root","");
    mysql_select_db("madb");
    $res = mysql_query("SELECT idsousprix, libsousprix FROM sousprix
    WHERE fk_prixsousp=".$_POST["fk_prixsousp"]." ORDER BY idsousprix");
    while($row = mysql_fetch_assoc($res)){
    echo "<option value='".$row["idsousprix"]."'>".$row["libsousprix"]."</option>";
    }
    }
    echo "</select> </td>";
    ?>

  11. #11
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2013
    Messages : 39
    Points : 4
    Points
    4
    Par défaut
    avec ce script, la 3ème liste déroulante est inactive et vide.
    par contre avec le script suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('prix').innerHTML = leselect;
    on peut dérouler la 3ème liste.
    alors que ce script la rend inactive et vide
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('idprix').innerHTML = leselect;

  12. #12
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    echo " <select name='prix'>";
    Ton select généré n'a pas d'id et n'appelle pas aussi la fonction.

    Indente aussi ton code javascript, c'est quasiment illisible.

    A+.

Discussions similaires

  1. liste déroulante liée et affichage
    Par faddou dans le forum Langage
    Réponses: 2
    Dernier message: 29/05/2008, 09h00
  2. [AJAX] Listes déroulantes liées
    Par Jiraiya42 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 14/04/2008, 09h58
  3. [AJAX] listes déroulantes liées
    Par alex6644 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 06/03/2008, 08h33
  4. [AJAX] Listes Déroulantes Liées : 2e liste qui ne s'affiche pas
    Par fayred dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/07/2007, 13h07
  5. [AJAX] Listes déroulantes liées avec Ajax
    Par paupiette dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/08/2006, 16h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo