Input text automatique creation suppression

Télécharger le projet
Commenter

Description

Voici un petit morceau de code qui permet de créer des input dans une div à la demande.
J'ai essayer de le faire de manière simple et claire.
J'espère qu'il aidera des gens dans la galère.
Je l'ai testé sur Firefox et InternetExplorer (j’étaie forcé), je ne sais pas si il fonctionne sur les autres navigateurs.

Source / Exemple : 


<html>
	<head>
		<script language="javascript" type="text/javascript">
			// Vérifie si les limites imposer sont respecter
			//    _ retourne true si le nombre est dans les limites définit
			//    _ retourne false si le nombre dépasse une des limites fixées
			function checkLimit(num) { // Passe en parametre un nombre à la fonction
				// Définit la limite haute (penser à votre limite * 2) --problème avec IE
				var limitTop = 20;
				// Définir la limite basse
				var limitBottom = 0;
				// Effectue la vérification sur le nombre
				if (num > limitTop) { // Vérification de la limite haute
					return false; // Retourne le booléen false si le nombre est suppérieure à la limite haute
				} else if (num < limitBottom) { // Vérifie la limite basse
					return false; // Retourne le booléen false si le nombre est inférieur à la limite basse
				} else { // Les deux cas ou il y aurai un dépassement des limites ont été effectués
					return true; // Retourne le booléen true pour dire que les limites ne sont pas dépassés
				}
			}
			// Fonction du boutton qui permet de rajouter un objet enfant (objectIdChild) dans un objet parent (objectIdParent)
			function buttonMore(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour dénommer l'objet parent et l'objet enfant
				var number = countObjects(document.getElementById(objectIdParent)); // Récupère le nombre d'objet que contient l'objet parent et le met dans la variable "number"
				// Utilise la fonction de vérification des limites avec le nombre récupérer. Il faut additionner 1 car l'on veut ajouter un objet.
				if (checkLimit(number + 1)) { // Le résultat renvoie un booléen afin de savoir si la limite est dépasser (false) ou pas (true) => false(refuse)/true(autorise) l'action suivante 
					createObject(objectIdParent, objectIdChild); // On appel la fonction de création d'objet en lui donnant comme paramètres l'objet parent (qui va contenir) et l'objet enfant (qui va être contenu)
					return true; // Retourne le booléen true, pas obligatoire, mais pratique si l'on rajoute un gestionnaire d'erreurs
				} else { // Si le booléen retourner est false alors c'est que la limite maximum à été atteinte
					alert("Limit exceded."); // On affiche à l'utilisateur que la limite maximum à été atteinte et qu'il ne peut pas créer un nouvelle objet
					return false; // Retourne le booléen false, pas obligatoire, mais pratique si l'on rajoute un gestionnaire d'erreurs
				}
			}
			// Fonction du boutton qui permet d'enlever un objet enfant (objectIdChild) dans un objet parent (objectIdParent)
			function buttonLess(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour définir l'objet parent et l'objet enfant qui sont utilisés
				var number = countObjects(document.getElementById(objectIdParent));// Récupère le nombre d'objet que contient l'objet parent et le met dans la variable "number"
				// Utilise la fonction de vérification des limites avec le nombre récupérer. Il faut soustraire 1 car l'on veut supprimer un objet.
				if (checkLimit(number - 1)) { // Le résultat renvoie un booléen afin de savoir si la limite est dépasser (false) ou pas (true) => false(refuse)/true(autorise) l'action suivante
					removeObject(objectIdParent, objectIdChild); // On appel la fonction de suppression d'objet en lui donnant comme paramètres l'objet parent (qui contient) et l'objet enfant (qui va être supprimer)
					return true;
				} else { // Si le booléen retourner est false alors c'est que la limite minimum à été atteinte
					alert("Limit exceded."); // On affiche à l'utilisateur que la limite minimum à été atteinte et qu'il ne peut pas supprimer un objet car il n'existe pas
					return false;
				}
			}
			// Fontion qui permet de créer un objet (objectIdChild) dans un autre (objectIdParent) et rajoute un saut de ligne
			function createObject(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour dénommer l'objet parent et l'objet enfant
				var obj_parent = document.getElementById(objectIdParent); // Récupère les valeurs de l'objet parent afin de pouvoir le manipuler
				var idNumber = countObjects(obj_parent);
				
				// Création et ajout d'attribut à l'objet enfant
				var obj_child = document.createElement(objectIdChild); // Création de l'objet enfant
				obj_child.setAttribute("id", (objectIdChild + (idNumber / 2))); // Ajout de l'attribut id -- afin de pouvoir manipuler facilement les objet je dirait qu'il est obligatoire les autres reste optionnel suivant les objet manipulé
				obj_child.setAttribute("name", (objectIdChild + (idNumber / 2))); // Ajout de l'attribut name
				obj_child.setAttribute("type", "text"); // Ajout de l'attribut type -- pour l'exemple ce sera un text peu être modifié à volonté
				obj_child.setAttribute("value", (idNumber / 2)); // Ajout d'une valeur par defaut construite à partir du nombre d'objet de l'objet parent
				obj_parent.appendChild(obj_child); // Ajout de l'objet enfant avec tous ces attributs dans l'object parent (à la fin de celui-ci)
				
				// Création et ajout dans l'objet parent d'un objet poyur le saut de ligne (afin d'avoir une colonne
				var obj_br = document.createElement('br'); // Création de l'objet de retour à la ligne
				obj_br.setAttribute("id", ("br" + (idNumber /2))); // Ajout d'un attribut d'id afin de pouvoir le manipuler
				obj_br.setAttribute("name", ("br" + (idNumber / 2))); // Ajout d'un attribut name pour pouvoir utiliser différentes fonction de JavaScript
				obj_parent.appendChild(obj_br); // Ajout de l'objet retour à la ligne dans l'objet parent
			}
			// Fonction de suppression d'un objet enfant dans un  objet parent
			function removeObject(objectIdParent, objectIdChild) { // Passe comme parametre des chaines de caractères pour spécifier l'objet parent et l'objet enfant
				var obj_parent = document.getElementById(objectIdParent); // Récupère les valeurs de l'objet parent afin de pouvoir le manipuler
				var idNumber = ((countObjects(obj_parent) / 2) - 1); // Appel de la fonction de comptage des objets enfants et mise du résultat dans une variable
				obj_parent.removeChild(document.getElementById(objectIdChild + idNumber)); // Supprime l'objet enfant d'après son id
				obj_parent.removeChild(document.getElementById("br" + idNumber)); // Supprime l'objet retour à la ligne d'après son id
			}
			// Fonction qui compte le nombre d'objets contenu dans un objet
			function countObjects(object) { // Passe en paramètre l'objet sur lequel le comptage sera effectué
				return (object.childNodes.length); // Compte le nombre d'objet renfermer et le retour ne à la fonction appelante
			}
		</script>
	</head>
	<body>
		<!--
			Pour l'exemple j'utilise une div dans laquelle j'ajoute des input de type text.
			Vous pouvez la modifier, afin de partir d'un autre élément et d'en créer des éléments différents (avec d'autres attributs aussi).
			Une petite chose, mettre au moins le parent en dur, je n'ai pas réussit à manipuler directement du body, mais si des gens savent ...
		-->
		<input type="submit" value="+" id="Submit1" onclick="return buttonMore('div_input', 'input')" />
		<input type="submit" value="-" id="Submit1" onclick="return buttonLess('div_input', 'input')" />
		<br />
		<div name="div_input" id="div_input"></div>
	</body>
</html>

Conclusion :


Je vous en prit, critiquer sa ne peut être que bénéfique ;)
Bonne journée.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.