génération dynamique d'input

**piere42** · 21/11/2011, 13h40

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

**Willpower** · 21/11/2011, 13h58

Code html :

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

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

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
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);
};

**piere42** · 21/11/2011, 15h55

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

**Willpower** · 21/11/2011, 16h49

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

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

Code html :

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

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

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 :

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

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);
    };
};

**SpaceFrog** · 21/11/2011, 17h16

http://www.developpez.net/forums/d53...ynamique-form/

**piere42** · 22/11/2011, 12h14

Merci!

génération dynamique d'input

JavaScript

Discussions similaires

Partager

Partager