[SRC] ajouter ou supprimer un champ texte

Version imprimable

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

17/12/2006, 19h36
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>  </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>"; }
01/08/2007, 11h42
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!
01/08/2007, 12h20
FremyCompany

Apparement, ils ont tous le même nom

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

Code:

var allInputs = document.getElementsByName("theName")
01/08/2007, 14h35
E.Bzz

Citation:

Envoyé par FremyCompany

Apparement, ils ont tous le même nom

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

A+
01/08/2007, 15h53
FremyCompany

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