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] Formulaire et ajax


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Étudiant
    Inscrit en
    Juillet 2006
    Messages
    25
    Détails du profil
    Informations personnelles :
    Âge : 36

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2006
    Messages : 25
    Par défaut [AJAX] Formulaire et ajax
    Bonjour à tous,

    Je suis un noob en ajax alors j'ai besoin de vous

    En fait, j'ai un formulaire dans le quel j'utilise ajax pour remplir une liste ('panne') en fonction d'une autre ('composant').

    Mais le problème vient quand j'envoie mon formulaire, je n'arrive pas récupérer la valeur de la liste remplie avec ajax (la liste 'panne'). Comment faire ?

    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
         <td><select id="composant" name="composant" tabindex="" style="width:275px" onchange='go()'>
         <option value='-1'>Aucun</option>
    	 <?php
                    $requeteComp = "SELECT * FROM composant ORDER BY nom_composant";
                    $retourComp = mysql_query($requeteComp);
                    while($composant = mysql_fetch_array($retourComp)) {
                            echo '<option value="'.$composant["num_composant"].'">'.$composant["nom_composant"].'</option>';
                    }
            ?>
    	</select>
    	</td>
         <td id='panne'>
    		<select name='panne' style="width:275px">
    			<option value='-1'>Choisir un composant</option>
    		</select>
    	 </td>

  2. #2
    Membre Expert Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Par défaut
    Merci de poster le code généré, c'est à dire seulement le html.

    Merci de poster également le code javascript qui génère la liste, et le php associé, sinon a moins d'être devin, on ne va pas pouvoir faire grand chose...

  3. #3
    Membre averti
    Étudiant
    Inscrit en
    Juillet 2006
    Messages
    25
    Détails du profil
    Informations personnelles :
    Âge : 36

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2006
    Messages : 25
    Par défaut
    Le script javascript :

    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
    		<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;
    			}
     
    			function go(){
    				var xhr = getXhr();
    				xhr.onreadystatechange = function(){
    					if(xhr.readyState == 4 && xhr.status == 200){
    						leselect = xhr.responseText;
    					document.getElementById('panne').innerHTML = leselect;
    					}
    				}
     
    				xhr.open("POST","ajaxPanne.php",true);
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				sel = document.getElementById('composant');
    				idComposant = sel.options[sel.selectedIndex].value;
    				xhr.send("idComposant="+idComposant);
    			}
    		</script>
    ajaxPanne.php :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
            include("../../private/_connect.php");
            echo "<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />";
            echo "<select id='panne' name='panne' style='width:275px'>";
            if(isset($_POST["idComposant"])){
                    $res = mysql_query("SELECT num_panne, desc_panne FROM panne
                            WHERE num_composant=".$_POST["idComposant"]);
                    while($row = mysql_fetch_assoc($res)){
                            echo "<option value='".$row["num_panne"]."'>".$row["desc_panne"]."</option>";
                    }
            }
            echo "</select>";
    ?>
    et mon form :

    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
    <form name='formPDF' method='POST' action='pdf_particulier.php' target='_blank'>
      <tbody>
        <tr>
         <th colspan="3">DESCRIPTIF DE LA PANNE</th>
        </tr>
        <tr>
         <th>Composant concern&eacute; | Panne</th>
         <td><select id="composant" name="composant" tabindex="" style="width:275px" onchange='go()'>
         <option value='-1'>Aucun</option>
    	 <?php
                    $requeteComp = "SELECT * FROM composant ORDER BY nom_composant";
                    $retourComp = mysql_query($requeteComp);
                    while($composant = mysql_fetch_array($retourComp)) {
                            echo '<option value="'.$composant["num_composant"].'">'.$composant["nom_composant"].'</option>';
                    }
            ?>
    	</select>
    	</td>
         <td id='panne'>
    		<select name='panne' style="width:275px">
    			<option value='-1'>Choisir un composant</option>
    		</select>
    	 </td>
        </tr>
      </tbody>
    </table>
    <input type="submit" name="valid_pdf" value="Cr&eacute;er" />
    </form>
    Sur ma page suivante (pdf_particulier.php), je récupère mon numéro de composant ($_POST['composant']) mais je n'arrive pas à réccupérer mon numéro de panne ($_POST['panne']).

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ta méthode pour mettre à jour ton formulaire est mauvaise.
    innerHTML ajoute bien les éléments dans ta page, mais ceux-ci ne sont pas pris en compte par le formulaire.
    Voir à ce sujet la contribution de SpaceFrog pour pallier à ce problème.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre confirmé Avatar de jamdinhe
    Inscrit en
    Avril 2006
    Messages
    167
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 167
    Par défaut
    Bonjour Toutouyoutou,

    j'ai aussi eu le même besoin que toi,

    voici comment que je l'ai re-écrit :

    javascript.js :
    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
    function request05(f)	{
    			var l1    = f.elements["list1"];
    			var l2    = f.elements["list2"];
    			var index = l1.selectedIndex;
     
    			if(index < 1)
    				l2.options.length = 0;
    			else {
    				var xhr_object = null;
    				if(window.XMLHttpRequest) // Firefox
    					xhr_object = new XMLHttpRequest();
    				else
    					if(window.ActiveXObject) // Internet Explorer
    						xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    					else { // XMLHttpRequest non supporté par le navigateur
    						alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    						return;
    					}
     
    				xhr_object.open("POST", "species.php", true);
    				xhr_object.onreadystatechange = function() {
    				if(xhr_object.readyState == 4)
    					eval(xhr_object.responseText);				
    												}
     
    				xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    				var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
    				xhr_object.send(data);
    			}
    		}
    index.html:
    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
    <html>
    <head>
    	<SCRIPT language='javascript' src='scripts/javascript.js'></SCRIPT>
    </head>
     
    <body>
    	<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
    		<fieldset>
    			<legend>Faites un choix dans la liste de gauche<br />et observez le résultat dans celle de droite</legend>
    			Famille&nbsp;:
    			<select name="list1" id="list1" onchange="request05(this.form);">
    				<option value="" selected="selected"></option>
     
    				<option value="Canidés"             >Canidés</option>
    				<option value="Félidés"             >Félidés</option>
    				<option value="Équidés"             >Équidés</option>
    				<option value="Bovidés"             >Bovidés</option>
    			</select>
    			&nbsp;&nbsp;&nbsp;Espèces&nbsp;:
    			<select name="list2" id="list2" >
     
    			</select>
    		</fieldset>
    	</form>
    </body>
    </html>
    species.php:
    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
    <?php
    header('Content-type: text/html; charset=iso-8859-1');
     
    $mysql_db = @mysql_connect("localhost", "root", "");
    @mysql_select_db("base");
     
    $query  = "SELECT `Species` FROM `Animals` WHERE `Family` = '".$_POST["family"]."'";
    $query .= " ORDER BY `Species`";
    $result = @mysql_query($query);
     
    echo 'var o = null;';
    echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
    echo 's.options.length = 0;';
    while($r = mysql_fetch_array($result))
    	echo 's.options[s.options.length] = new Option("'.$r["Species"].'");';
     
    @mysql_close($mysql_db);
    ?>
    et bien entendus, j'ai créer la table "Animals" dans base de données "base" de mon PhpMyAdmin et remplis toute la table afin de profiter de la bonne exécution du code.

    opte plutôt pour ce code, il est vraiment consistant

  6. #6
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut
    ??? Bon ne sert plus à rien puisque jamdinhe a trouvé une réponse à son problème. Mais je laisse tout de même ma soluce on ne sait jamais.???

    Je me permettrais un ajout sur le fichier PHP.
    Rajouter la condition "or die(mysql_error())" après le mysql_query

    Puis remplace les $_POST par de $_REQUEST

    ensuite tu testes simplement ta page PHP pour en voir le retour.

    http://&#91;...]/species.php?family=bovi...s&select=list2

    Tiens nous au jus

    Et si quelqu'un pouvait m'expliquer ce que fait exactement le

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    eval(xhr_object.responseText);
    Une fois qu'il a reçu le resultat de la page PHP. Car j'arrive pas à comprendre comment il interprete les données retournées.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] formulaire "intelligent" ajax
    Par taffMan dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 23/02/2008, 17h33
  2. [AJAX] Formulaire en AJAX
    Par Khleo dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 07/02/2008, 10h15
  3. [AJAX] Formulaire et ajax
    Par wacha dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 22/01/2008, 23h40
  4. [AJAX] Formulaire sous AJAX !!!
    Par urai1 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/03/2007, 21h36
  5. [AJAX] Formulaire en AJAX
    Par myriam.kone dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 07/11/2006, 13h41

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