[AJAX] Récupérer 2 variables sur 2 listes select

**elcoyotos** · 18/06/2008, 08h38

Bonjour à tous,

En préambule, je peux affirmer que je suis archi nul en Ajax

Mais j'essaie ...

Je dois récupérer deux variables, traiter puis afficher le résultat. Mais, mon problème est que je n'arrive pas à envoyer les 2 variables en même temps. Je n'arrive à envoyer qu'une seule variable à la fois

Voici ma page en ligne : http://www.arizona-dream.com/Usa/astuces/distance2.php

Je sais bien qu'avec un onChange sur les select il est normal que j'ai ce résultat.

J'ai essayé pleins de chose : Onsubmit dans le form, Onclick sur un button mais je n'y arrive pas ....

Voici le javascript (récupérer sur ce site) :

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
 
<script type="text/javascript">
function sendData(param, page) {
	if(document.all) {
		var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
	}
	else {
		var XhrObj = new XMLHttpRequest(); // Mozilla
	}
 
 
	var content = document.getElementById("resultat"); // Définition de l'endroit d'affichage
 
	XhrObj.open("POST", page);
 
	// Ok pour la page cible
	XhrObj.onreadystatechange = function()
	{
		if (XhrObj.readyState == 4 && XhrObj.status == 200)
			content.innerHTML = XhrObj.responseText ;
	}
 
	XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	XhrObj.send(param);
}
</script>

Le 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
 
<form name="form" id="form" method="post" action="distance2.php">
 
<!--LE PREMIER SELECT-->
<select name="depart" id="depart" onChange="sendData('depart='+this.value,'distance3.php');">
<option value="1">Albany (New York)</option>
<option value="2">Albuquerque (Nouveau Mexique)</option>
<option value="3">Atlanta (Géorgie)</option>
<option value="4">Baltimore (Maryland)</option>
<option value="5">Billings (Montana)</option>
etc ...
</select>
 
<!--LE SECONDSELECT-->
<select name="destination" id="destination" onChange="sendData('depart='+this.value,'distance3.php');">
<option value="1">Albany (New York)</option>
<option value="2">Albuquerque (Nouveau Mexique)</option>
<option value="3">Atlanta (Géorgie)</option>
<option value="4">Baltimore (Maryland)</option>
<option value="5">Billings (Montana)</option>
etc ...
</select>
 
<input name="go" type="submit" class="btn" value="Calculer la distance">

Que je traite dans le fichier distance3.php et que j'affiche dans <div id="resultat"></div>

Si une bonne ame pouvait me filler un coup de main je lui en serai reconnaissant

**Bovino** · 18/06/2008, 09h27

Tu ne devrais pas préciser d'arguments pour cette fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function sendData(param, page)

la page étant la même, pas la peine de la passer en argument, quant aux champs, tu peux facilement les récupérer dans ta fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
getElementById('depart').selectedIndex.value;
getElementById('arrivee').selectedIndex.value;

puis créer ta requête avec les deux paramètres départ et arrivée

**elcoyotos** · 18/06/2008, 10h23

Tout d'abord, merci d'avoir répondu aussi rapidement.

Donc, j'ai supprimer les arguments pour la fonction SendData

Puis j'ai ajouter les deux ligne dans ma fonction et le nom de ma page php dans XhrObj.open :

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
 
<script type="text/javascript">
function sendData() {
    if(document.all) {
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
    }
    else {
        var XhrObj = new XMLHttpRequest(); // Mozilla
    }
 
 
    var content = document.getElementById("resultat"); // Définition de l'endroit d'affichage
    var depart = document.getElementById('depart').selectedIndex.value;
    var arrivee = document.getElementById('arrivee').selectedIndex.value;
 
    XhrObj.open("POST", "distance3.php");
 
    // Ok pour la page cible
    XhrObj.onreadystatechange = function()
    {
        if (XhrObj.readyState == 4 && XhrObj.status == 200)
            content.innerHTML = XhrObj.responseText ;
    }
 
    XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    XhrObj.send(depart,arrivee);
}
</script>

A la derniere ligne j'envois les deux variables (XhrObj.send(depart,arrivee)

Et j'ai retiré les onChange sur les select

Mais, il se passe plus rien ....

Bien entendu, vu que je n'y connais rien en AJAX, j'ai du merdé quelque part ....

Peut être, si ce n'est pas abusé, tu pourrai, me mettre le javascript et le HTML ?

**Bovino** · 18/06/2008, 10h37

C'est le send qui n'est pas bon, il doit être de la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"param1=valeur_param1&param2=valeur_param2"

donc dans ton cas, si la fonction dans distance3.php prend comme arguments depart et arrivee :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

XhrObj.send("depart="+depart+"&amp;arrivee="+arrivee);

et tu récupères dans le php $_POST['depart'] et $_POST['arrivee']

**elcoyotos** · 18/06/2008, 10h47

Désolé, j'ai bien remis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

XhrObj.send("depart="+depart+"&amp;arrivee="+arrivee);

Mais toujours rien ...

Dans le HTML, il ne fuat pas mettre un évènement ? OnClick, un On Submit ? Si oui où (form, submit, select) ?

**Bovino** · 18/06/2008, 11h24

Euh... si

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
<select name="depart" id="depart" onChange="sendData();">
<option value="1">Albany (New York)</option>
<option value="2">Albuquerque (Nouveau Mexique)</option>
<option value="3">Atlanta (Géorgie)</option>
<option value="4">Baltimore (Maryland)</option>
<option value="5">Billings (Montana)</option>
etc ...
</select>
 
<!--LE SECONDSELECT-->
<select name="destination" id="destination" onChange="sendData();">
<option value="1">Albany (New York)</option>
<option value="2">Albuquerque (Nouveau Mexique)</option>
<option value="3">Atlanta (Géorgie)</option>
<option value="4">Baltimore (Maryland)</option>
<option value="5">Billings (Montana)</option>
etc ...
</select>

**elcoyotos** · 18/06/2008, 13h27

Bon ba c'est pire qu'au début : Plus rien ne s'affiche

Script d'origine : http://www.arizona-dream.com/Usa/ast...ance2_sauv.php

Script modifié : http://www.arizona-dream.com/Usa/astuces/distance2.php

Une idée ?

**Bovino** · 18/06/2008, 13h38

C'est un problème d'encodage, essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

XhrObj.send("depart="+depart+"&arrivee="+arrivee);

et dans lafonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var depart = document.getElementById('depart').selectedIndex.value;

à remplacer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var depart = document.getElementById('depart').selectedIndex;

selectedIndex te renvoie -1 si aucun select n'est activé, l'index activé sinon
pour le value :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var depart = document.getElementById('depart').selectedIndex;
depart = document.getElementById('depart').option[depart];

Mais dans ton cas, depart = document.getElementById('depart').selectedIndex - 1

**elcoyotos** · 18/06/2008, 13h50

Toujours aucun résultat

Je remes le JS au cas ou

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
<script type="text/javascript">
function sendData() {
    if(document.all) {
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
    }
    else {
        var XhrObj = new XMLHttpRequest(); // Mozilla
    }
 
 
    var content = document.getElementById("resultat"); // Définition de l'endroit d'affichage
    var depart = document.getElementById('depart').selectedIndex.value;
    var destination = document.getElementById('destination').selectedIndex.value;
 
    XhrObj.open("POST", "distance3.php");
 
    // Ok pour la page cible
    XhrObj.onreadystatechange = function()
    {
        if (XhrObj.readyState == 4 && XhrObj.status == 200)
            content.innerHTML = XhrObj.responseText ;
    }
 
    XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    XhrObj.send("depart="+depart+"&destination="+destination);
}
</script>

Puis le 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
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
 
                <?php
                //  Requete
                $sqlvilles = "SELECT * FROM usa_villes,usa_etats WHERE idetats=etat_id  AND destination ='o' ORDER BY nomville";
                if ( !$resultvilles = mysql_query( $sqlvilles , $conn ) ) {
                    echo( "Execution de la requete d'affichage impossible" );
                }
                ?>          
                <form name="form" id="form" method="post" action="distance2.php">
              <table width="50%" border="0" align="center" cellpadding="0" cellspacing="20">
                    <tr>
                  <td colspan="2" class="information"><img src="../photos/Commun/navigation/information.gif" alt="Information" title="Information" width="19" height="17">&nbsp;3600 destinations !!! </td>
                </tr>
                <tr>
                  <td width="47%" class="droite">D&eacute;part : </td>
                  <td width="53%">
                  <select name="depart" id="depart" onChange="sendData();">
                    <?php
                    while( $rowvilles = mysql_fetch_assoc( $resultvilles ) ) {
                    ?>
                        <option value="<?php echo($rowvilles['idville']); ?>"><?php echo($rowvilles['nomville']); ?> (<?php echo($rowvilles['nometat']); ?>)</option>
                    <?php
                    }
                    ?>
                    </select>
                  </td>
                <?php
                //  Requete
                $sqlvilles = "SELECT * FROM usa_villes,usa_etats WHERE idetats=etat_id AND destination ='o' ORDER BY nomville";
                if ( !$resultvilles = mysql_query( $sqlvilles , $conn ) ) {
                    echo( "Execution de la requete d'affichage impossible" );
                }
                ?>
                </tr>
                <tr>
                  <td class="droite">Destination :</td>
                  <td><select name="destination" id="destination" onChange="sendData();">
                    <?php
                    while( $rowvilles = mysql_fetch_assoc( $resultvilles ) ) {
                    ?>
                        <option value="<?php echo($rowvilles['idville']); ?>"><?php echo($rowvilles['nomville']); ?> (<?php echo($rowvilles['nometat']); ?>)</option>
                    <?php
                    }
                    ?>
                  </select></td>
                </tr>
                <tr>
                  <td colspan="2" align="center"><input name="go" type="submit" class="btn" value="Calculer la distance"></td>
                </tr>
              </table>
              </form>

**Bovino** · 18/06/2008, 13h52

Désolé, j'ai fait des modifs dans ma précédente réponse...

**elcoyotos** · 18/06/2008, 14h07

Je suis revenue au point de départ.

A savoir que seulement la première variable est transmise ($_POST['depart']).

Sauf qu'au lieux de me transmettre la valeur sélectionnée il me transmet la valeur sélectionnée - 1 ???????????

Ce doit être lié à ce que tu m'explique dans ton post mais je dois avouer que je n'ai rien compris

En tous cas, merci à toi, Bovino, de prendre de ton temps pour me répondre et essayer de solutionner ce problème. Vraiment sympa

J'ai donc effectué ce que tu m'as indiqué dans le précédent post :

Remplacé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var depart = document.getElementById('depart').selectedIndex.value;

Par ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var depart = document.getElementById('depart').selectedIndex;

Veux tu que je t'envoie mes deux pages php en message privé pour que tu puisse tester sereinement ?

**Bovino** · 18/06/2008, 14h17

Comme je te disais, selectedIndex renvoie l'indice du select sélectionné, qui commence à 0 (les indices de tes value commencent à 1) ou renvoie -1 si aucun select n'est choisi.

Pour récupérer le value du select, tu peux utiliser option[selectedIndex].value
-> option est un tableau de tes select
-> option[selectedIndex] est l'objet select sélectionné
-> option[selectedIndex].value est le contenu de l'attribut value correspondant

il faut récupérer ainsi ta variable depart et ta variable arrivee puis les transmettre en Ajax...

Effectivement, tu peux m'envoyer tes pages PHP, mais je te préviens, je n'aurait probablement pas le temps de les examiner avant ce soir...

**Bovino** · 18/06/2008, 14h23

Après être retourné sur ta page test, je constate qu'il y a du progrès, mais tu as oublié d'appliquer la même méthode pour récupérer la variable arrivée...
Courage, tu y es presque

**elcoyotos** · 18/06/2008, 14h25

Oui, j'ai compris pour l'indice des tableaux. C'est comme en PHP.

Je vais donc t'envoyer mes deux pages. Je ne suis pas pressé.

Même si tu me donne une solution dans 15 jours je t'en serai très reconnaissant

Je te rappelle le but de ce script : Lorsque l'utilisateur sélectionne la destination, la page PHP fait le traitement et AJAX affiche le résultat

Encore merci à toi

**Bovino** · 18/06/2008, 14h48

Avant tout, modifie aussi dans ton script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var depart = document.getElementById('depart').selectedIndex;
var destination = document.getElementById('destination').selectedIndex.value;

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var depart = document.getElementById('depart').selectedIndex + 1;
var destination = document.getElementById('destination').selectedIndex + 1;

**Bovino** · 18/06/2008, 14h52

Testé (encore merci Firebug...), ça fonctionne à merveille...
Albany Baltimore : 533 km, 331 miles !
Attention toutefois dans ton code php (que je n'ai plus trop besoin de regarder du coup...) : mets "kilom&eagrave;tres" au lieu de "kilomètres" !

**elcoyotos** · 18/06/2008, 15h30

Youpi !!!!

Ca fonctionne

Un grand merci à toi

Pour ceux que cela interesse, je mes le lien vers la page ou le script sera opérationel --> http://www.arizona-dream.com/Usa/astuces/distance.php

Vive l'entraide sur developpez.com

[AJAX] Récupérer 2 variables sur 2 listes select

JavaScript

Discussions similaires

Partager

Partager