[AJAX] Récupérer 2 variables sur 2 listes select
Bonjour à tous,
En préambule, je peux affirmer que je suis archi nul en Ajax :yaisse2:
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:oops:
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:
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:
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 :lol:
