formulaire autoajustable

Saluté ...
j'ai un petit pb avec un formulaire autoajustable ...
l'idée est que j'ai un modèle pour une ligne d'un formulaire ...et que cette ligne peut être dupliquée à l'infini en cliquant sur un bouton.
a chaque fois ça ajoute à une div (tab_det_gener le contenu d'une div de référence (table_det).
le problème est que sous firefox le innerHTML m'ajoute les ligners mais les input déjà remplis sur les lignes déjà généres sont automatiquement vidés à chaque génération de ligne ... pas top du tout en fait


Voici le modèle html

  <div id="table_det">
 
    <div class="gauche">{#txt_ref}<br>
      <!-- Ne pas changer les name des ces input -->
      <input name="doc_ref[]" id="doc_ref" type="text" value="{#val_ref}" onBlur="this.value.innerHTML = this.value;">
    </div>
   
    <div class="gauche">{#txt_code}<br>
      <input name="doc_code[]" id="doc_code" type="text" value="{#val_code}">
    </div>
   
    <div class="gauche">{#txt_indice}<br>
      <input name="doc_indice[]" id="doc_indice" type="text" value="{#val_indice}" style="width:40px">
    </div>
   
    <div class="gauche"><br>
      <img src="images/icon/alert.gif" alt="!!!">
    </div>
   
    <div class="gauche"><br>
      <img src="images/icon/plus.gif" alt="{#txt_new_line}" border="0" onclick="addLineDET();">
    </div>
     
     
  </div>
 
  <div id="table_det_gener">
  <!-- le js va incrémenter les lignes de formulaire ici -->
  </div>

et le JS qui génère les nouvelles lignes

                   
        function addLineDET() {
                //on recup le numero de ligne ou on est
                var len =  (document.form_det['doc_ref'].length);
               
                var html = document.getElementById('table_det').innerHTML;
                //alert (html);
               
               
                document.getElementById('table_det_gener').innerHTML += html;
        }

rien de très sorcier mais il faut absolument que je trouve le moyen de conserver les valeurs déjà entrées dans les champs de texte...
Le problème n'apparait pas sur IE (pour une fois ...) ce qui montre bien que c'est du à la façon dont est géré le innerHTML sous FF...

merci pour votre aide ;)
++

Bonjour,

    nous, on ne voit rien avec tes {#txt_ref}....
    et le <form> ? où qu'est-y ?
    bref, la page générée, avec ce qu'il faut, ça nous aiderait.

    parfois, il vaut mieux utiliser createElement et appendChild

---

                Cordialement            Bul         [mon Site]     [M'écrire]

yes ..effectivement ... ma page passe par un moteur de template (d'ou les {#txt...}
j'ai trouvé cet article

http://www.the-asw.com/post/2005/09/18/50-une-interface-de-formulaire-a-base-de-tableaux-dynamiques

Je vais essayer de me débrouiller avec ça ! à priori ça colle bien avec mon besoin ...
ceci dit je préfère toujours comprendre le fonctionnement que d'utiliser des trucs déjà tout faits ... question d'orgueil personnel p'tet ...lol

Voici le html avec le form en question

<form action="" method="post" name="form_det">
  <div id="table_det">
 
    <div class="gauche">{#txt_ref}<br>
      <!-- Ne pas changer les name des ces input -->
      <input name="doc_ref[]" id="doc_ref" type="text" >
    </div>
   
    <div class="gauche">{#txt_ams}<br>
      <input name="doc_ams[]" id="doc_ams" type="text" >
    </div>
   
    <div class="gauche">{#txt_indice}<br>
      <input name="doc_indice[]" id="doc_indice" type="text" style="width:40px">
    </div>
   
    <div class="gauche"><br>
      <img src="images/icon/alert.gif" alt="!!!">
    </div>
   
    <div class="gauche"><br>
      <img src="images/icon/plus.gif" alt="{#txt_new_line}" border="0" onclick="addLineDET();">
    </div>
     
     
  </div>
 
  <div id="table_det_gener">
  <!-- le js va incrémenter les lignes de formulaire ici -->
  </div>


 
  <div class="separateur">&nbsp;&nbsp;&nbsp;&nbsp;</div>
  <div><input type="button" onClick="document.form_det.submit();" value="{#txt_submit}">  </div>
</form>