Discussion :

[elcoyotos]

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]

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]

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]

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+"&arrivee="+arrivee);

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

[elcoyotos]

Désolé, j'ai bien remis :

Code :

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

XhrObj.send("depart="+depart+"&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]

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>