[AJAX] saisies formulaires qui s'effacent

**socaw** · 10/11/2011, 13h40

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 :

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
<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 :

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
<?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 ?

**andry.aime** · 10/11/2011, 17h23

Bonjour,

Si tu utilises ajax que pour générer ces éléments, je te conseille d'utiliser du simple javascript et la fonction cloneNode, c'est plus propre et performant:

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
<html>
<head>
	<title>cloneNode</title>
	<script type="text/javascript">
		var lineIndex=0;
		function ajouter() {
		 ligne = document.getElementById("line0").cloneNode(true);
		 ligne.id="line"+(++lineIndex);
		 document.getElementById("a_remplir").appendChild(ligne);
		}
	</script>
</head>
<body>
 
 <form method="post" action="#">
  <p><input type="button" id="boutton_ajout" value="+" onclick="ajouter();" /></p>
  <div id="a_remplir">
   <p id="line0">
    <select>
     <option>Item 1</option>
     <option>Item 2</option>
     <option>Item 3</option>
    </select>
    <input type="text" />
   </p>
  </div>
 </form>
</body></html>

A+.

**socaw** · 14/11/2011, 09h00

En réalité, j'ai simplifié mon script pour poster ma question sur le forum, en fait la liste déroulante est remplie par une requête dans une base de données MySQL et c'est dans cette optique que j'utilise AJAX.

Est-ce que cloneNode fonctionnera puisque les items de la liste déroulante sont générés par le PHP ?

**socaw** · 14/11/2011, 09h06

Désolé de ne pas avoir testé avant d'avoir posté la réponse précédente.
Je viens de la faire et ça fonctionne nickel avec la liste générée par PHP.
Merci !

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
<html>
<head>
 <title>cloneNode</title>
 <script type="text/javascript">
  var lineIndex=0;
  function ajouter() {
   ligne = document.getElementById("line0").cloneNode(true);
   ligne.id="line"+(++lineIndex);
   document.getElementById("a_remplir").appendChild(ligne);
  }
 </script>
</head>
<body>
 <form method="post" action="#">
  <p><input type="button" id="boutton_ajout" value="+" onclick="ajouter();" /></p>
  <div id="a_remplir">
   <p id="line0">
 <?php
  try {
   $bdd = new PDO('mysql:host=localhost;dbname=test','root','');
  } catch (Exception $e) {
   die('Erreur : ' . $e->getMessage());
  }
  $requete = $bdd->query('SELECT * FROM achat LIMIT 0,5') or die(print_r($bdd->errorInfo()));
  echo '<select>';
  while ($data = $requete->fetch()) {
   echo '<option>'.$data['codeAchat'].'</option>';
  }
  $requete->closeCursor();
  echo '</select>';
 ?>
    <input type="text" />
   </p>
  </div>
 </form>
</body></html>