[AJAX] saisies formulaires qui s'effacent
Bonjour,
J'ai un problème d'effacement des valeurs saisies dans des <input type="text" /> d'un formulaire lorsque j'ajoute d'autres <input type"text" /> à ce même formulaire au moyen d'AJAX.
La page test.php contient un formulaire avec une liste déroulante et une zone de saisie de texte. Sur cette page, il y a un bouton qui permet d'ajouter une ligne à ce formulaire ; la ligne ajoutée contenant une liste déroulante et une zone de saisie de texte, identique à la première ligne.
Le bouton appelle la fonction javascript ajouter() de la page test.php
La fonction ajouter() se charge d'appeler le script ajax.php et au moyen de l'objet XMLHttpRequest de lui transmettre les informations et de récupérer le résultat de ce script, qui a pur but d'ajouter une ligne au formulaire.
Or, si je saisi une valeur dans un <input type"text" /> et que je clique sur le bouton pour ajouter une ligne la valeur saisie s'efface (constaté sous FF 8.0, mais pas sous IE 8).
Voici les deux scripts :
test.php
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
27
28
29
30
31
32
| <html>
<script type="text/javascript">
<!--
function ajouter() {
xhr = new XMLHttpRequest();
/* récupération et ajout de l'information traitée par ajax.php */
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
ligneSup = xhr.responseText;
document.getElementById('a_remplir').innerHTML += ligneSup;
}
}
/* envoie à ajax.php qu'on veut ajouter une ligne */
xhr.open("POST","ajax.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
pourAjout = document.getElementById('boutton_ajout');
xhr.send("idBoutton="+pourAjout);
}
// -->
</script>
<body onload="ajouter();">
<form method="post" action="#">
<p><input type="button" id="boutton_ajout" value="+" onclick="ajouter();" /></p>
<div id="a_remplir">
<!-- rempli avec ajax-->
</div>
</form>
</body>
</html> |
ajax.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?php
header('Content-Type: text/html; charset=utf-8');
if(isset($_REQUEST["idBoutton"])) {
// normalement la liste est générée par une requête exécutée sur la base de données
echo'
<p>
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<input type="text" />
</p>
';
}
?> |
Quelqu'un voit où je me plante ?
