Bonjour à tous.

Je souhaite faire un script permettant aux utilisateurs d'entrer plusieurs mot clé, un mot clé par input

on commence avec un input et a coté un bouton +

lorsqu'un mot clé est saisi et que l'on appuis sur +, un nouvel input s'affiche au dessus avec le contenu du 1er input et un bouton - pour le supprimer.

Pour ceci j'ai créé 2 fonctions

function plus() {
	var champ = document.getElementById("choice");
	var ajout = document.getElementById("form_input");
	var count = document.getElementById("count");
 
	//nouveau champ
	var new_champ = '<input type="text" name="formul[]" value="'+champ.value+'"> <button id="minus" form="other" onclick="minus(this.item);">-</button><br>';
 
	champ.value = '';
	count.value = count.value+1;
	var div = document.createElement('div');
	div.innerHTML = new_champ;
 
	ajout.appendChild(div);
 
}
 
function minus(id) {
	var ajout = document.getElementById("form_input");
 
	ajout.removeChild(ajout.childNodes.item(id));
}

        <script src="js/form.js"></script>
        <form method="post">
          <div id="form_input" class="f"></div>
          <input type="text" id="choice" name="formul[]"> <button id="plus" onclick="plus();" form="other">+</button>
          <input type="hidden" id="count" value="0">
        </form>

Pour ajouter, pas de problème, cela fonctionne.

Par contre pour supprimer, je ne vois pas comment faire.

Ce que j'ai fait ne fonctionne pas.

Pourriez-vous m'aider

Merci à vous

Bonjour ManiCoco.

Je ne vois pas bien l'intérêt de faire ceci.

Solution 1 : il pourrait y avoir un seul input pour saisir le mot clef. Quand on clique sur +, l'input se vide et une div est créée avec le texte précédemment saisi. Quand on clique sur cette div, on la supprime.

Solution 2 : Encore plus simple : on a un seul input dans lequel on saisit autant de mots clefs que voulu, séparés par un caractère (ça peut être un de ceux-là : +,;/-#). Puis au traitement du formulaire on transforme la valeur de l'input en tableau. Ainsi : "image;vecteur;illustration;concept" devient ["image", "vecteur", "illustration", "concept"] grâce à valeurDeMonInput.split(';'). Ça allège largement le code et l'utilisateur a moins de clics à faire. Pour supprimer un mot clef, il suffit de l'enlever de l'input. Et l'ajout de tous les mots se fait à l'envoi du formulaire.

Si ton cas nécessite vraiment de faire comme tu veux faire, alors je reviendrai.

Merci à toi Ench

Ta premiere idée est bonne, j'ai mis ca dans un input type text pour qu'a la validation du formulaire tout soit enregistrer dans la base de donnée, ligne par ligne

Mon probleme est que je ne vois pas comment cibler tel ou tel élément.

Oui tes 2 idées sont bonne désolé je me suis mal exprimé, je voullais dire que t as premiere idée me plait

OK, je vois. Je te fais une petite démonstration avec la solution 1 :

On admet que tu as une div avec l'id "tags" qui contiendra tous les tags ajoutés, un bouton avec l'id "add" et un input avec l'id "input". Voici le javascript correspondant :

// récup des éléments présents dans le DOM
const tags = document.getElementById('tags')
const add = document.getElementById('add')
const input = document.getElementById('input')

let tagsArr = [] // contient tous les tags créés

add.addEventListener('click', () => {
	// on vérifie que le tag n'a pas encore été créé
	if (tagsArr.indexOf(input.value) !== -1) {
		alert('tag déjà créé')
		return
	}
	// on ajoute le tag à tagsArr
	tagsArr.push(input.value)
	// on crée une div tag qu'on insère dans la div tags
	const tag = document.createElement('div')
	tag.classList.add('tag')
	tag.title = 'Clique pour supprimer ce tag.'
	tag.innerHTML = input.value
	tag.addEventListener('click', () => {
		// on supprime le tag quand on clique dessus...
		// ... dans le DOM 
		tags.removeChild(tag)
		// ... dans tagsArr
		const index = tagsArr.indexOf(tag.innerHTML)
		tagsArr.splice(index, 1)
	}, false)
	tags.appendChild(tag)
	// on vide l'input et on lui redonne le focus
	input.value = ''
	input.focus()
}, false)

Puis l'ensemble pour jouer avec :

https://jsbin.com/xurevazomu/edit?js,output

Voilà, il ne reste plus qu'à utiliser tagsArr pour le formulaire

-
Edité par Diatomée 14 août 2019 à 13:58:42

Merci à toi Ench, j'ai réussi à faire ce que je voulais