[JavaScript] [SRC] ajouter ou supprimer un champ texte

[javatwister]

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

Code :

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 :

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 :

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 :

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

Code :

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 :

var allInputs = document.getElementsByName("theName")

[E.Bzz]

Envoyé par FremyCompany

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...