génération dynamique d'input [Résolu]

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!

21/11/2011, 12h40	#1
piere42 Invité de passage Inscription : juillet 2007 Messages : 11 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 11 Points : 1 Points : 1	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
	00

21/11/2011, 14h55	#3
piere42 Invité de passage Inscription : juillet 2007 Messages : 11 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 11 Points : 1 Points : 1	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
	00

21/11/2011, 16h16	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 052 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 052 Points : 45 161 Points : 45 161	http://www.developpez.net/forums/d53...ynamique-form/ __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

22/11/2011, 11h14	#6
piere42 Invité de passage Inscription : juillet 2007 Messages : 11 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 11 Points : 1 Points : 1	Merci!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email