Discussion :

[azeurty]

Bonsoir,

J'ai vu pas mal de scripts ajoutant des input dynamiquement grâce à un bouton "Ajouter" mais je cherche un script qui ajoute des input dynamiquement en fonction d'une liste déroulante.
Admettons la liste déroulante suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
    <FORM>
        <SELECT NAME="Rubrique">
            <OPTION value="1">1</OPTION>
            <OPTION value="2">2</OPTION>
            <OPTION value="3">3</OPTION>
            <OPTION value="4">4</OPTION>
            <OPTION value="5">5</OPTION>
        </SELECT>
    </FORM>

Comment puis-je ajouter des input dynamiquement en fonction de la quantité sélectionnée dans cette liste ?

J'ai testé en reprenant d'autres scripts et en les adaptant avec des boucles for mais mon manque de maîtrise du JS me joue des tours ...

Si quelqu'un a une solution ça serait chouette.

Merci et à plus !

[andry.aime]

Bonsoir,

Regarde la FAQ, Comment ajouter des éléments dans une page ?

A+.

[azeurty]

Ok, merci andry.aime !

Grâce à toi j'avance un peu plus dans mon développement. Pour l'instant lors de la sélection dans la liste, j'arrive à afficher le nombre d'input souhaité.
En revanche maintenant il faut que j'arrive à les supprimer à chaque fois que je change la catégorie de ma liste. Puis il faudra aussi que j'ajoute Nom et prenom devant mes input et pour finir je récupèrerai les données des input.

Voici mon code :

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
16
17
18
19
20
21
22
 
<script type="text/javascript">
function ajout_input(form) 
{
	i = form.Rubrique.selectedIndex;
	for (j=0;j<=i;j++)
	{
		var input= document.createElement('input');
		document.body.appendChild(input);
	}
}
</script>
 
 
<form>
	<select name="Rubrique" onChange='ajout_input(this.form)'>
		<OPTION>1</OPTION>
		<OPTION>2</OPTION>
		<OPTION>3</OPTION>
		<OPTION>4</OPTION>
	</select>
</form>

À plus !

[briegel]

Considères qu'à chaque fois que tu dois ajouter des inputs, il faut d'abord enlever les anciens.

Je te conseillerais d'ajouter les inputs dans un cadre avec un id judicieusement choisi, ça simplifiera ta démarche : exemple dans une div avec un id "contInputs" (c'est pas une insulte à la mode !).

Ensuite, à chaque fois que tu dois ajouter des inputs, ou des span ou ce que tu veux, tu enlèves tous les noeuds enfants de cette div (je sais c'est cruel mais c'est la vie).

Code :

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

1
2
3
4
5
6
 
//pointage et mise en mémoire de la référence à ta div
var cont=document.getElementById('contInputs');
while(cont.firstChild){//tant que la div a un premier enfant...
cont.removeChild(cont.firstChild);//...on le retire Hahahaaa !!!
}

Pour le fait d'ajouter les noms et prénoms, tu n'as qu'à faire la même chose qu'avec les inputs, sauf que tu crées deux noeuds, l'un à l'aide de "createElement('nomDeLelement')", l'autre à l'aide de "createTextNode('tonTexte')", puis tu appendChild le second dans le premier, puis tu appendChild le premier juste avant le input.

[azeurty]

Ok merci briegel pour tous tes précieux conseils !
C'est vrai que c'est un peu cruel quand même le JS
D'ailleurs à lire les comm de ton code tu y prends aussi du plaisir lol ("//...on le retire Hahahaaa !!!)

Encore merci !
À plus !

[trifly]

Bonjour à tous,

Désolé de remonter ce topic un peu ancien mais j'ai un problème similaire à celui-ci de azeurty et je n'voulais pas créer de "doublons".

Je souhaites aussi créer des inputs en fonction d'une sélection d'un item d'une liste mais à la différence que dans le select ce n'est pas des chiffres qui détermineront le nombres de input à ajouter.
Lors de la sélection de cet item, un input de type checkbox est ajouté avec comme "name" et "value" le nom de l'item sélectionné ainsi que le nom de l'item inscrit à coté cet input.

J'ai pour le moment réussi à ajouter dynamiquement un input de type checkbox mais celui-ci n'a ni de "value" ni de "name" et aucun texte n'est affiché à coté.

Voici mon code :

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
16
17
18
19
20
<script>
function ajout_input(form) {
	var input= document.createElement('input');
	input.type = 'checkbox';
	input.setAttribute("checked", "true")
	input.setAttribute("disabled", "true")
	materiel_select.appendChild(input);
}
</script>
 
[...]
Matériel : 
<select name="liste_articles" onChange='ajout_input(this.form)'>
	<OPTION>article_1</OPTION>
	<OPTION>article_2</OPTION>
	<OPTION>article_3</OPTION>
</select>
<div id="materiel_select">
</div>
[...]

Je n'sais pas comment passer en paramètre dans la fonction JS le nom de l'item ainsi que d'ajouter un attribut "value" et "name" à l'input.

Merci de votre aide !