génération dynamique d'input

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

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, 12h58

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, 14h55

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, 15h49

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, 16h16

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

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

Merci!

génération dynamique d'input

JavaScript

Discussions similaires

Partager

Partager