Réinitialisation des champs de saisie

Sujet résolu

16 février 2011 à 12:51:32

Bonjour,

<html>
	<head>
		<title>Page de tests</title>
		<script type="text/javascript">
                        i = 1;
			function ajout(){
				var champtexte = document.getElementById('champ');
				var texte;

				texte = '<input type="text" name="champ'+i+'" /><br />';
				champtexte.innerHTML += texte;
                                i++;
			}
		</script>
	</head>
	<body>
		<form>
			<input type="text" name="champ" />
			<div id="champ"></div>
			<input type="button" onclick="ajout();" value="Ajouter" />
		</form>
	</body>
</html>

Alors, voici mon code.
Il ajoute un nouveau champ de saisie entre les balises <div> et </div> à chaque clic sur le bouton.
Le souci, c'est qu'à chaque ajout (à chaque clic sur "Ajouter"), les valeurs entrées dans les champs précédents sont réinitialisées.
Y a-t-il un moyen d'empêcher ça ?

Kazerd

16 février 2011 à 13:30:06

Bonjour

Apparemment appeler "innerHTML" réinitialise les champs (étrange en effet)
Donc j'ai utilisé une autre méthode, je sais pas si elle te convient :

<html>
    
    <head>
        <title>
            Page de tests
        </title>
        <script type="text/javascript">
            function ajout() {
                var i = 1;
                var el = document.createElement("input");
                el.name = 'champ' + i;
                el.type = 'text';
                document.getElementById('champ').appendChild(el);
                var br = document.createElement("br");
                document.getElementById('champ').appendChild(br);
                i++;
            }
        </script>
    </head>
    
    <body>
        <form>
            <input type="text" name="champ0" />
            <div id="champ">
            </div>
            <input type="button" onclick="ajout();" value="Ajouter" />
        </form>
    </body>

</html>

Kazerd

Nøx

16 février 2011 à 13:44:15

Je teste ça et je te dis. Merci en tout cas.

restimel

16 février 2011 à 13:59:40

Le fait que innerHTML réinitialise les champs n'est pas si étrange que ça.
Car lorsque tu fais champtexte.innerHTML += texte; il concatène texte à la valeur actuelle de innerHTML puis met à jour champtexte.

Or les valeurs que l'utilisateur a entré dans les champs n'appartiennent pas au HTML donc tu ne peux pas les lire avec innerHTML. Il va donc remettre les valeurs par défaut des champs (ici pas de valeur)

La fonction que propose Kazerd doit fonctionner, à une exception près: var i = 1; (ligne 9) doit être à l'extérieur de la fonction ajout. Sinon tous tes champs auront le même name 'champ1'

Si tu souhaites éviter l'utilisation d'une variable globale nommée i tu peux utiliser une closure de ce genre:

var ajout = function() {
  var i = 1;
  return function(){
    var el = document.createElement("input");
    el.name = 'champ' + i;
    el.type = 'text';
    document.getElementById('champ').appendChild(el);
    var br = document.createElement("br");
    document.getElementById('champ').appendChild(br);
    i++;
  };
}();

Nøx

16 février 2011 à 15:45:07

Hey hey

Comme l'utilisation de innerHTML m'évitait pas mal de boulot grâce aux copier-coller, j'ai donc élaboré - après avoir lu les explications de restimel - un petit palliatif que voici :

<html>
	<head>
		<title>Page de tests</title>
		<script type="text/javascript">
			var i=1;
			function ajout(){
				var champtexte = document.getElementById('champ'+i);
				i++;
				var texte;
				var nouveau = document.createElement("div");
				nouveau.setAttribute('id','champ'+i);
				texte = '<input type="text" name="champ'+i+'" /><br />';
				insertAfter(nouveau, champtexte);
				nouveau.innerHTML = texte;
			}

			function insertAfter(newElement, afterElement){
                                //fonction du tutoriel de Thunderseb
				var pere = afterElement.parentNode;

				if(pere.lastChild === afterElement){
					pere.appendChild(newElement);
					//si le dernier élément est le même que l'élément 
					//après lequel on veut insérer, il suffit de faire
					//appendChild()
				}
				else{
					pere.insertBefore(newElement, afterElement.nextSibling);
					//Dans le cas contraire, on fait insertBefore() sur
					//l'élément suivant
				}
			}

		</script>
	</head>
	<body>
		<form>
			<input type="text" name="champ" />
			<div id="champ1"></div>
			<input type="button" onclick="ajout();" value="Ajouter" />
		</form>
	</body>
</html>

Certes c'est un peu bricolé, mais le résultat est là.

Merci à vous deux.