saisies formulaires qui s'effacent [Résolu]

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>

andry.aime · 14/11/2011, 17h50

Re, attention tes options n'ont pas de value

.

socaw · 18/11/2011, 16h14

Citation:

Envoyé par andry.aime

Re, attention tes options n'ont pas de value

.

Oui, c'est pris en compte par le reste du code javascript que je n'ai pas mentionné dans l'exemple, histoire de ne pas alourdir celui-ci.

14/11/2011, 09h00	#3
socaw Nouveau Membre du Club Inscription : mars 2010 Messages : 79 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations forums : Inscription : mars 2010 Messages : 79 Points : 30 Points : 30	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 ?
	00

14/11/2011, 17h50	#5
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 129 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 129 Points : 7 258 Points : 7 258	Re, attention tes options n'ont pas de value .
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email