[DOM] InnerHTML & formulaire, perte des informations

**bambou** · 19/07/2007, 17h25

Bonjour,

Je suis actuelement en train de construire un formulaire et une partie du formulaire peut se retrouver plusieurs fois si l'utilisateur le souhaite.

Comme par exemple pour un formulaire qui recueille les informations d'un parent. Le parents peut ajouter autant de fois la partie qui traite des informations d'un enfant selon le nombre d'enfant qu'il posséde..

Mon probleme (et la je vais surement entendre crier certains puristes), est que j'utilise la propriété innerHTML d'une div pour ajouter la partie du formulaire qui peut se retrouver plusieurs fois plutot que d'utiliser le DOM. Et que à chaque fois que l'utilisateur appuis sur le bouton d'ajout...tout ce qu'il a ecrit précédemment dans le formulaire disparait

comme l'illustre l'exemple trés simplifié ci dessous :

Code html :

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
<html>
<head>
<script language="javascript">
function add(){
	var myDiv = document.getElementById('mydiv');
	myDiv.innerHTML += "<input type='text' id='text2' /><br />";
}
</script>
</head>
 
<body>
<input type="button" value="add" onClick="add()" />
<form name='f1'>
<div id='mydiv'>
<input type='text' />
</div>
 
</form>
</body>
</html>

La partie récurente de mon formulaire étant assez complexe, il m'est difficile de tout faire par des createElement() et des appendChild(), à moins de repasser 1 mois dessus...

Quelqu'un aurait-il une solution à ce problème?

merci

**dream_of_australia** · 19/07/2007, 17h57

Si tu n'as pas d'id unique pour chaque input, et d'après ce que j'ai compris c'est le cas (tu parles de parties de formulaires qui se répétent) tu auras effectivement du mal à recupérer les différentes valeurs.

**bambou** · 19/07/2007, 18h07

si j'ai des id unique pour tout, je génére la partie qui se répéte et donc au passage je génére des id...

...donc ça veux dire qu'il faut que je sauvegarde toutes les valeurs du formulaire et que je restaure tout aprés avoir fait le innerHTML...

Sais-tu si il y a un moyen simple de faire une copy ou est-ce qu'il faut tout sauver 1 par 1?

**dream_of_australia** · 19/07/2007, 18h18

Je ne comprends pas très bien ce que tu veux dire, pourquoi tout restaurer après le innerHTML ??

**Auteur** · 19/07/2007, 19h37

bonjour,

cloneNode ? Il faudra quand même vérifier les attributs des éléments (id en particulier) pour éviter les doublons avant d'ajouter dans le formulaire la partie clonée.

**bambou** · 20/07/2007, 00h01

Envoyé par dream_of_australia

Je ne comprends pas très bien ce que tu veux dire, pourquoi tout restaurer après le innerHTML ??

ben je suppose que l'utilisateur risque d'etre surpris si, lorsqu'il voudra ajouter sous parties du formulaire, tout ce qu'il aura saisi avant se fait la malle...

si je reprend mon exemple précédant du formulaire parent/enfant..

l'utilisateurs entre toutes ses infos de parent (nom, prénom, date de naissance, sexe...etc)

va pour ajouter son 1er enfant...et la...paf..tout ce qu'il a saisie disparait...un peu vénére il recommence, rempli ses champs + celui de son enfant...et ajoute un second enfant...boum plu rien encore...a mon avis il devrait pas trop apprécier

Envoyé par Auteur

bonjour,

cloneNode ? Il faudra quand même vérifier les attributs des éléments (id en particulier) pour éviter les doublons avant d'ajouter dans le formulaire la partie clonée.

je vais regarder de ce coté la..ou je suis en train de me dire que simplement en créant une div avec javascript a chaque ajout, je fait un appendChild et mon innerHTML dans ma nouvelle div

je vais tester tout ça et poster la solution demain

merci pour ces pistes

**Auteur** · 20/07/2007, 08h34

Envoyé par bambou

je vais regarder de ce coté la..ou je suis en train de me dire que simplement en créant une div avec javascript a chaque ajout, je fait un appendChild et mon innerHTML dans ma nouvelle div

je vais tester tout ça et poster la solution demain

merci pour ces pistes

est-ce que les informations contenues dans les éléments créés avec innerHTML seront envoyées au serveur et exploitables ? (c'est une des raisons pour laquelle il est conseillé d'utiliser les méthodes du DOM).

**bambou** · 20/07/2007, 09h40

oui, les informations contenus dans le innerHTML sont une partie du formulaire, donc lorsque l'utilisateur va valider le formulaire une partie des infos renvoyées au serveur proviendra de la (des) partie(s) du formulaire qui a (ont) été ajoutées par le innerHTML

**bambou** · 20/07/2007, 10h01

J'ai reussi à corriger le bug en mettant le code qui s'ajoute dans une autre div

si je reprend le petit code exemple de mon premier message ça donne ceci :

Code html :

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
<html>
<head>
<script language="javascript">
function add(){
        //on crée une nouvelle div où l'on  va mettre le contenu du innerHTML
        // cette div sera à la suite des div existantes
        var newDiv = document.createElement('div');
        // on ajoute cette div à l'élement parent, j'ai ajouter une div "main" pour        
        //cela
        document.getElementById('main').appendCHild(newDiv);
	newDiv.innerHTML = "<input type='text' id='text2' /><br />";
}
</script>
</head>
 
  <body>
    <input type="button" value="add" onClick="add()" />
    <form name='f1'>
      <div id='main'>
        <div id='mydiv'>
          <input type='text' />
        </div>
        <!-- la newDiv devrait apparaitre ici-->
      </div>
    </form>
  </body>
</html>

Voila, j'ai bien concience que ce n'est certe pas la meilleure solution cependant c'est quand meme fastidieu de passer par par le DOM quand on a plus d'une dizaine d'element à créer.

Si, toujours à propos de passer par le DOM, je reçois les informations brutes et que mon javascript doit créer toutes les elements de mise en page (div et autre..), tous les inputs de formulaire et autres controles..c'est trés long de faire (a coder d'une part, mais à l'exécution aussi ça doit surement ralentir) pour chaque element les createElement, setAttribute, appendChild...etc, non?

**Auteur** · 20/07/2007, 16h35

Envoyé par bambou

Si, toujours à propos de passer par le DOM, je reçois les informations brutes et que mon javascript doit créer toutes les elements de mise en page (div et autre..), tous les inputs de formulaire et autres controles..c'est trés long de faire (a coder d'une part, mais à l'exécution aussi ça doit surement ralentir) pour chaque element les createElement, setAttribute, appendChild...etc, non?

pas spécialement : un petit exemple ici
par contre IE ne reconnait pas setAttribute ni getAttribute

[DOM] InnerHTML & formulaire, perte des informations

JavaScript

Discussions similaires

Partager

Partager