javascript + ajout tag + suppression tag

fredmac75 · 28 Janvier 2008

bonjour à tous et à toutes

voilà mon soucis, y aurait-il une âme charitable pour m'aider en javascript ?

je fais un formulaire avec un possibilité d'ajout de tags (et de suppresion du tag)

1 - on entre un tag puis on clique sur "ajouter un tag". Ce dernier créer un tag dans une liste (avec la possibilité de le supprimer).
2 - je supprime le tag de la liste en cliquant sur le "X".

Voici ou j'en suis...
fichier html

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Mes tags</title>

<script type="text/javascript" src="js/gestiontags.js"></script>
<style type="text/css">
fieldset {
	border:none;
	border-bottom:1px dashed #333;
	margin-bottom:20px;
	}
a {cursor:pointer;}
#ContentTagOeil input, #ContentTagNez input, #ContentTagBouche input {
	width:150px;
	}
</style>
</head>
<body>
ceci est un essai de gestion de tag
<form action="#" name="FormTag" id="FormTag" method="post">
<fieldset>
<legend>&OElig;il</legend>
<input type="text" id="ContentTagOeil" /> <a href="#" title="Ajouter ce tag" onclick="AjouterTag();return false;">Ajouter ce tag</a>
<p>Ambre (<a href="#" title="Supprimer ce tag" onclick="SupprimerTag();return false;">X</a>), claire (<a href="#" title="Supprimer ce tag" onclick="SupprimerTag();return false;">X</a>)</p>
</fieldset>

<fieldset>
<legend>Nez</legend>
<input type="text" id="ContentTagNez" /> <a href="#" title="Ajouter ce tag" onclick="AjouterTag();return false;">Ajouter ce tag</a>
<p>puissant (<a href="#" title="Supprimer ce tag" onclick="SupprimerTag();return false;">X</a>), légé (<a href="#" title="Supprimer ce tag" onclick="SupprimerTag();return false;">X</a>)</p>
</fieldset>

<fieldset>
<legend>Bouche</legend>
<input type="text" id="ContentTagBouche" /> <a href="#" title="Ajouter ce tag" onclick="AjouterTag();return false;">Ajouter ce tag</a>
<p>Tannique (<a href="#" title="Supprimer ce tag" onclick="SupprimerTag();return false;">X</a>), chêne (<a href="#" title="Supprimer ce tag" onclick="SupprimerTag();return false;">X</a>)</p>
</fieldset>
</form>

</body>
</html>

Fichier js

Bloc de code:

     function AjouterTag(){ 
   	if (document.getElementById('ContentTagOeil').value.length<=3) {
   		alert("Vous devriez remplir ce champs avec un terme de plus de trois lettres");
   		}
   		document.getElementById('ContentTagOeil').focus();
   		return false;
   	} else {
   		
   		
   	}

   function SupprimerTag(){ 
    
   }

Si quelqu'un pouvait me dépanner... :up:

fredmac75 · 28 Janvier 2008

Si un modo avais la gentillesse de bien vouloir modifier le titre du sujet et remplacer le "x" par un "sc".
Merci

fredmac75 · 28 Janvier 2008

J'en profite pour vous dire que je met à jour le premier post au fur est à mesure de mes propres "découvertes".

iMatthieu · 28 Janvier 2008

Hello,

Voici un exemple de base :

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Mes tags</title>

<script type="text/javascript">

	var nb_tags = 0; // compteur

	function AjouterTag(){ 
		
		var tag = document.getElementById('ContentTagOeil').value;
		
	   	if (tag.length<=3) {
	   		alert("Vous devriez remplir ce champs avec un terme de plus de trois lettres");
	   		document.getElementById('ContentTagOeil').focus();
	   	} 
	
		else {
			
			var new_span = document.createElement('span'); // on crée un nouvel élément HTML
			
			new_span.id = 'tag' + nb_tags; // on lui donne un identifiant
			
			new_span.innerHTML = tag; // on insère le 'tag'
			new_span.innerHTML += ' (<a href="javascript:SupprimerTag(\'tag' + nb_tags + '\')">X</a>), '; // on complète avec le lien pour retirer le tag
			
			document.getElementById('wrap').appendChild(new_span); // on insère l'objet
			
			nb_tags++; // on incrémente le compteur
			
	   	}
		return false;
	}

	function SupprimerTag(id){ 

		document.getElementById('wrap').removeChild(document.getElementById(id));		
		return false;

	}
	
</script>
<style type="text/css">
fieldset {
	border:none;
	border-bottom:1px dashed #333;
	margin-bottom:20px;
	}
a {cursor:pointer;}
#ContentTagOeil input, #ContentTagNez input, #ContentTagBouche input {
	width:150px;
	}
</style>
</head>
<body>
<form action="#" name="FormTag" id="FormTag" method="post">
<fieldset>
<legend>Tags</legend>
<input type="text" id="ContentTagOeil" /> <a href="#" title="Ajouter ce tag" onclick="AjouterTag();return false;">Ajouter ce tag</a>

<div id="wrap"><!-- VOICI LE WRAP UTILISE POUR INSERER LES TAGS --></div>

</fieldset>
</form>
</body>
</html>

Il faudra adapter un peu ce code pour gérer plusieurs listes.

Si tu veux pouvoir enregistrer ces tags dans une BDD tu devras mettre un champ caché qui contient la valeur du compteur et ensuite faire une boucle côté serveur pour tester chaque champ.

Pour le javascript je te conseil vraiment jquery, je me suis surpris à faire des trucs que je pensais impossible avec mon niveau en JS ^^

fredmac75 · 29 Janvier 2008

Après quelques modifications et une prise de tête sur la notation du removeChild, voilà le résultat...

Bloc de code:

   var nb_tags = 0;
   
   function AjouterTag(){
   	
		   	if (document.getElementById('ContentTagOeil').value.length<=3) {
		   		alert("Vous devriez remplir ce champs avec un terme de plus de trois lettres");
		   		document.getElementById('ContentTagOeil').focus();
		   		}else{
		   		
		   		var CurrentTag = document.getElementById('ContentTagOeil').value;// on affecte le tag dans une variable
		   		var new_span = document.createElement('span'); // on crée un nouvel élément HTML
				new_span.id = 'ContentTagOeil' + nb_tags; // on lui donne un identifiant
				new_span.innerHTML = CurrentTag; // on insère le 'tag'
				new_span.innerHTML += ' (<a href="javascript:SupprimerTag(\'ContentTagOeil' + nb_tags + '\')" title="Supprimer ce tag">X</a>), '; // on complète avec le lien pour retirer le tag
				document.getElementById('ListTagOeil').appendChild(new_span); // on insère l'objet
				nb_tags++; // on incrémente le compteur
		   	}
		   	return false;
   }

	function SupprimerTag(new_span){
	var node=document.getElementById(new_span);
	node.parentNode.removeChild(node);
	}

Merci pour ton aide :up:

iMatthieu · 29 Janvier 2008

Good job

javascript + ajout tag + suppression tag

fredmac75

Membre expert

fredmac75

Membre expert

fredmac75

Membre expert

iMatthieu

Membre actif

fredmac75

Membre expert

iMatthieu

Membre actif

Sujets similaires