Discussion :

[javatwister]

utilitaire classique: proposer un nombre de champs au choix, entre 0 et x.

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
<script type="text/javascript">
 
var c,c2, ch;
 
// ajouter un champ avec son "name" propre;
function plus(){
c=document.getElementById('cadre');
c2=c.getElementsByTagName('input');
ch=document.createElement('input');
 
ch.setAttribute('type','text');
ch.setAttribute('name','ch'+c2.length);
c.appendChild(ch);
 
document.getElementById('sup').style.display='inline';
}
 
// supprimer le dernier champ;
function moins(){
if(c2.length>0){c.removeChild(c2[c2.length-1])}
if(c2.length==0){document.getElementById('sup').style.display='none'};
}
 
</script>

squelette de formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form id="frm" action="">
<div id="cadre" style="margin-left:100px;width:200px">
</div>
 
<p>
<input type="button" value="ajouter un champ" onclick="plus()" />
<input type="button" style="display:none" id="sup" value="supprimer un champ" onclick="moins()" />
</p>
</form>

aperçu: http://javatwist.imingo.net/ajouform.php

[FMaz]

Très intéressant !

Est-ce que ca fonctionnerait aussi avec des champs pour parcourir et joindre un fichier (car ces champs ont certaine protections des navigateurs (dont FF), et au moment d'ajouter un champ, le contenu des champs précédent se vide :-\ )

J'avais personnellement palié à ce problème en adoptant une structure telle que:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div>
  <input />
  <div> 
    <input />
    <div>
      <input />
      <div>
          <!-- Prêt à recevoir le nouveau champ suivant -->
      </div>
    </div>
  </div>
</div>

Seconde question, est-ce que ta méthode à un avantage réel comparativement à une solution telle que:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div id="nextdiv0"></div>
<input type="button" onclick="AddChamp();" value="Ajouter un champ" />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var curId=0;
function AddChamp(){
  document.getElementById('nextdiv' + curId).innerHTML = "<input type=\"text\" name=\"nom[]\" /> <div id=\"" + (++curId) + "\"></div>";
}

[Dodielapatate]

Bonjour, je relance ce topic après quelque mois mais il réponds presque à toutes mes attentes alors!!!
Il me manque juste le moyen de récupérer le texte entré dans les différents champs, en fait, je ne comprends pas quel est le nom "propre" de chaque champ. Si quelqu'un peut me répondre, merci!

[FremyCompany]

Apparement, ils ont tous le même nom

Pour les récupérer sous forme de liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var allInputs = document.getElementsByName("theName")

[E.Bzz]

Apparement, ils ont tous le même nom

Heu ... non : "ch" suivi d'un compteur

A+

[FremyCompany]

Ah pardon, oui, je parlais de ma méthode de FMaz, pas celle de JavaTwister, que je n'avais pas vue...