Ajouter des éléments à un formulaire en JS

Dans les formulaires d’un site web, il peut être utile de rajouter des champs quand on en à besoin pour par exemple rajouter des tag à un article de blog ou pour par exemple ajouter plusieurs éléments d’un seul coup facilement sans recharger la page.
Pour ce faire on doit utiliser du Javascript et comme d’habitude j’utilise le célèbre framework jquery.

On à besoin de juste deux éléments:

• Un lien ou un bouton qui au clic permettra d’ajouter un élément.
• Un conteneur qui sera un div pour recevoir le contenu.

A chaque ajout on incrémentera une variable qui rendra nos id uniques ce qui permettra de supprimer un élément que l’on ne veut plus ou pour d’autre intéraction futur.
On utilisera aussi la fonction append de Jquery qui permet d’ajouter les éléments à la suite tout en conservant les précédents. Par défaut, seul 3 éléments sont affichés automatiquement.

Les name de nos input se composeront de cette façon: name="tag[1]" plutôt que name="tag_1", name="tag_2", name="tag_3"… ce qui permettra de récupérer leur valeur plus facilement.

Voila ce qu’on aura avec une requête POST:

array(1) {
	["tag"]=> array(5) {
		[0]=> string(14) "Valeur de tag_0"
		[1]=> string(14) "Valeur de tag_1"
		[2]=> string(14) "Valeur de tag_2"
		[3]=> string(14) "Valeur de tag_3"
		[4]=> string(14) "Valeur de tag_4"
	}
}

Place au code!!!

Voiçi le code HTML:

<form method="post" action="index.php">
<button type="button" class="ajouter_tag">Ajouter un élément</button><input type="submit">
<div id="div_input">
<div id="tag_0"><input type="text" name="tag[0]" value="Valeur de id_0"><button class="suppression_tag" data-supprimer-tag="0">Supprimer</button></div>
<div id="tag_1"><input type="text" name="tag[1]" value="Valeur de id_1"><button class="suppression_tag" data-supprimer-tag="1">Supprimer</button></div>
<div id="tag_2"><input type="text" name="tag[2]" value="Valeur de id_2"><button class="suppression_tag" data-supprimer-tag="2">Supprimer</button></div>
</div>
<button type="button" class="ajouter_tag">Ajouter un élément</button><input type="submit">
</form>

$(document).ready(function() {
	// On déclare nos variables:
	var i = 3;
	
	// Pour ajouter un élément:
	$(document).on('click', '.ajouter_tag', function() {
		$('#div_input').append('<div id="tag_'+i+'"><input type="text" name="tag['+i+']" value="Valeur de id_'+i+'"><button class="suppression_tag" data-supprimer-tag="'+i+'">Supprimer</button></div>'+"\n");
		i += 1; // On ajoute un
		return false;
	});

	// Pour supprimer un élément:
	$(document).on('click', '.suppression_tag', function() {
		$('#tag_'+$(this).data('supprimer-tag')).empty();
		return false;
	});

});