génération dynamique d'input

Version imprimable

21/11/2011, 12h40
piere42

génération dynamique d'input

Bonjour à tous,

Voilà mon problème.
Il faudrait que je puisse générer un nombre défini d'input dynamiquement en fonction d'un nombre qui est saisi par l'utilisateur dans un autre champs.

Exemple :

champs "nb_chp" -> 12

alors se créent 12 champs "input1", "input2",...,"input12"

N'étant pas un grand spécialiste du javascript, je me demandais s'il n'existait pas un âme charitable pour m'aider.

Merci beaucoup!
Pierre

Code:

1
2
<input type="text" id="nbr_chmp" value="0" />
<input type="button" id="button" value="créer les champs" />

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function $(id){
    return document.getElementById(id);
}
function ajouterInput(id){
    var input = document.createElement('input');
    input.id = id;
    document.appendChild(input);
    // ou pour mettre les inputs dans un div précis :
    // $('id_du_conteneur').appendChild(input);
}
$('button').onclick = function(){
    var nbr = parseInt( $('nbr_chmp').value );
    for(var i=0;i<nbr;i++)
        ajouterInput('input' + i);
};

21/11/2011, 14h55
piere42

Merci pour ton aide Willpower mais j'ai utilisé ton code et il semble ne pas fonctionner à moins que j'ai oublié quelque chose...

Mais, à part mettre le js dans le head, il n'y avait rien d'autre à faire non ?

Merci en tout cas

au temps pour moi, je suis trop confiant en moi que pour tester le code que je propose. :oops:

il faut remplacer document.appendChild par document.body.appendChildvoici une version qui fonctionne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <body> <input type="text" id="nbr_chmp" value="0" /> <input type="button" id="button" value="créer les champs" /> <script type="text/javascript"> function $(id){ return document.getElementById(id); } function ajouterInput(id){ var input = document.createElement('input'); input.id = id; document.body.appendChild(input); // ou pour mettre les inputs dans un div précis : // $('id_du_conteneur').appendChild(input); } $('button').onclick = function(){ var nbr = parseInt( $('nbr_chmp').value ); for(var i=0;i<nbr;i++) ajouterInput('input' + i); }; </script> </body>
quelques remarques:
- j'ai défini une fonction "$", si tu utilises des librairies comme jQuery arrange-toi pour ne pas avoir de conflit avec ma version.

- si tu veux placer le script dans le "head" tu dois utiliser une fonction pour attendre que le DOM soit chargé, sinon le getElementById te renverra null. en gros, tu dois englober le :
Code:

1 2 3 4 5 $('button').onclick = function(){ var nbr = parseInt( $('nbr_chmp').value ); for(var i=0;i<nbr;i++) ajouterInput('input' + i); };
par :
Code:

1 2 3 4 5 6 7 window.onload = function(){ $('button').onclick = function(){ var nbr = parseInt( $('nbr_chmp').value ); for(var i=0;i<nbr;i++) ajouterInput('input' + i); }; };

21/11/2011, 16h16
SpaceFrog

http://www.developpez.net/forums/d53...ynamique-form/
22/11/2011, 11h14
piere42

Merci!