Discussion :

[plefebv]

Bonjour,

Sur un événement, je cherche à modifier plusieurs valeurs de champs liés, définies par le résultat d'une requête Ajax.

Ca commence donc de manière très classique:

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
<script type="text/javascript">
	var HTTP_Response_Holder = null ;  
 
	function loadHTTPData() 
	{	var qui=document.getElementById("qui").value;
		if (typeof window.ActiveXObject != 'undefined' ) 
		{	HTTP_Response_Holder = new ActiveXObject("Microsoft.XMLHTTP");
			HTTP_Response_Holder.onreadystatechange = process ;
	        }
		else 
		{	HTTP_Response_Holder = new XMLHttpRequest();
			HTTP_Response_Holder.onload = process ;
	        }
	        HTTP_Response_Holder.open( "GET", "./decision.php?qui="+qui, true );
	        HTTP_Response_Holder.send( null );
	}
 
	function process() 
	{	if ( HTTP_Response_Holder.readyState != 4 ) return ;
		var texte=HTTP_Response_Holder.responseText ;         
        	document.getElementById("output").innerHTML = texte; 
	 }              
</script>

Mon exemple est "colas.php":

Code html :

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
<form name="Colas_mon_p_tit_frere" action="#" method="POST">
<fieldset><legend>Qui fait quoi ?</legend>
 
<div id="choix_famille" name="choix_famille">Qui : 
  <select name="qui">
    <option value="papa" >papa</option>
    <option value="maman" >maman</option>
    <option value="la bonne" >la bonne</option>
    <option value="moi" >moi</option>
    <option value="soeur" >ma soeur</option>
  </select>
</div> 
 
<div id="choix_etage" name="choix_etage">&Eacute;tage :
  <select name="etage">
    <option value="03" >03</option>
    <option value="02" >02</option>
    <option value="01" >01</option>
    <option value="RDC" selected >RDC</option>
    <option value="1 S/S" >1 S/S</option>
    <option value="2 S/S" >2 S/S</option>
  </select>
</div> 
 
<div id="choix_etage" name="choix_etage">Action effectu&eacute;e :
  <select name="travail">
    <option value="" ></option>
    <option value="beurre" >bat le beurre</option>
    <option value="chocolat" >chocolat</option>
    <option value="fleurette" >conter fleurette</option>
    <option value="gateau" >du g&acirc;teau</option>
    <option value="repasser" >repasser</option>
  </select>
</div> 
 
<div id="debug" name="debug">Retour : <br/> 
	<textarea name="output"></textarea>
</div> 
 
<div id="action" name="action"> 
	<input type="submit" value="Ok !">
</div> 
</fieldset>
</form>

A ce formulaire, j'associe la page de réponse Ajax "decision.php" suivante:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
switch ($_POST['qui'])
{	case 'la bonne' : echo "la bonne;01;dans la chambre;repasser"; 
		break;
	case 'maman' : echo "maman;1 S/S;en bas;chocolat"; 
		break;
	case 'moi' : echo "moi;01;dans la chambre;fleurette"; 
		break;
	case 'papa' : echo "papa;03;en haut;gâteau"; 
		break;
	case 'soeur' : echo "soeur;RDC;cuisine;beurre"; 
		break;
}
?>

Je ne sais pas :
1) affecter plusieurs valeurs de champs en javascript depuis ma réponse ; Et
2) depuis une même page, gérer plusieurs conteneurs HTTP_Response_Holder pour affecter d'autres valeurs à partir d'autres champs.

Merci de vos lumières.

[plefebv]

Vous aurez corrigé bien sûr, le premier div s'écrit normalement avec l'appel Ajax ! :

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="choix_famille" name="choix_famille">Qui : 
  <select name="qui" onChange="javascript:loadHTTPData();">
    <option value="papa" >papa</option>
    <option value="maman" >maman</option>
    <option value="la bonne" >la bonne</option>
    <option value="moi" >moi</option>
    <option value="soeur" >ma soeur</option>
  </select>
</div>

... pour plus d'élégance, on peut aussi affecter en javascript l'attribut onChange de l'élément de name "qui".

[danielhagnoul]

<div id="choix_etage" name="choix_etage"> !

Un ID doit être unique dans la page web. Un name doit être unique dans un formulaire.

[plefebv]

Bonsoir, merci d'avoir répondu.
Mes id et name sont uniques dans la page. Donc aucun problème, ou alors je ne vois pas.

[danielhagnoul]

[...] Mes id et name sont uniques dans la page. Donc aucun problème, ou alors je ne vois pas.

Message n° 1, code HTML : il y a deux fois <div id="choix_etage" name="choix_etage"> !