[AJAX] innerHTML et champ input non mise a jour.

**laurent1** · 02/11/2012, 18h27

Bonjour,

Je suis bloqué et j'ai besoin d'aide...

Je souhaite mettre a jour la valeur d'un champs type <input...
Et je bloque, pourtant le meme code fonctionne pour une liste deroulante.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans titre</title>
<link href="Styles/style_base.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
	 		var g_passage_GO=-1;
			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;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				//alert("Fonction go()");
				var xhr = getXhr();
				//alert("test passage fonction GO()" );
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste.
						//alert("Fonction go() dans le if");
						document.getElementById("Ville").innerHTML = leselect;
						//document.getElementsByName("MaVille").innerHTML = leselect;
						alert(leselect);
					}
				}
 
				xhr.open("POST","CP_ville.php",true);				
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel=document.getElementsByName("CodePostal");
				//alert(sel);
				idCP=sel.item(0).value;
				//alert(idCP);
				xhr.send("CP_="+idCP);
 
 
			}
			function go2(){
				alert("Fonction go2()");
				var xhr2 = getXhr();
				xhr2.onreadystatechange = function(){
					//alert("Fonction go2()onreadystatechange");
					//alert (xhr2.readyState);
				if(xhr2.readyState == 4 && xhr2.status == 200){
						leselect = xhr2.responseText;
						//alert("Fonction go() dans le if");
						//document.getElementsByName("Code").item(0).value=leselect;
						document.getElementById("Mychamp1").innerHTML=leselect;
						//document.getElementById("CodeB").innerHTML=leselect;
						alert(leselect);
					}
				}
 
				xhr2.open("POST","Reg_dep.php",true);				
				xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel=document.getElementsByName("MaVille");
				//alert(sel);
				idville=sel.item(0).value;
				//alert(idville);
				//alert("IdVille : "+idville);
				xhr2.send("Ville_="+idville);
 
 
			}
</script>
</head>
 
<body>
<input name="CodePostal" type="text" onChange="go()">
<input id='Mychamp1' type='text' value='test'>
<input id="CodeB" type="text" >
<select name="MaVille" id="Ville" onChange="go2()">
<option>Votre Choix</option>
 
 
</select>
</body>
</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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans titre</title>
<link href="Styles/style_base.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<?php
        
        $IdCodePostal= $_POST['CP_'];
        //$IdCodePostal='83170';
        //echo $IdCodePostal;
        echo "<select id='Ville'>";
        echo "<option> Votre choix </option>";
 
        //onChange='Ret_variable_ville()'
        if(isset($IdCodePostal)){
                mysql_connect("localhost","lbocquillon83149","vrod");
                mysql_select_db("sitedestinationvacances");
                $res = mysql_query("SELECT Commune FROM localisation 
                        WHERE CodePostal=".$IdCodePostal." ORDER BY Commune");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row['Commune']."'>".$row['Commune']."</option>";
                        /*echo "<option>";
                        echo $row['Commune'];
                        echo "</option>";*/
                }
        }
        
        echo "</select>";
?>
</body>
</html>

Le code ci-dessus fonctionne, par contre celui en dessous ne donne pas de resultat.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
 
<body>
<?php
        echo "<input id='Mychamp1' type='text' value='12'></input>";
?>
</body>
</html>

Si qqu a une idée ?

**NoSmoking** · 02/11/2012, 19h36

Bonjour,
les éléments INPUT n'ont pas de innerHTML mais une value.

En retour de ta fonction il te suffit de modifier la value mais pour cela il ne te faut pas retourner du HTML, ou alors modifier le contenant de celui ci.

Code html :

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

1
2
3
<div id="input_conteneur">
  <input id='Mychamp1' type='text' value='12'>
</div>

Si fichier PHP retourne

Code php :

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

1
2
3
<?php
echo "<input id='Mychamp1' type='text' value='12'>";
?>

alors il faut faire

Code :

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

document.getElementById('input_conteneur').innerHTML= xhr.responseText;

Si fichier PHP retourne

Code php :

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

1
2
3
<?php
echo "12";
?>

alors il faut faire

Code :

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

document.getElementById('Mychamp1').value = xhr.responseText;

On notera qu'il est inutile de retourner une structure HTML qui ne sera pas traitée.

**laurent1** · 03/11/2012, 09h20

Je te remercie pour ta reponse rapide et clair.

Encore merci

[AJAX] innerHTML et champ input non mise a jour.

AJAX

Discussions similaires

Partager

Partager