Input text automatique creation suppression

Soyez le premier à donner votre avis sur cette source.

Vue 3 473 fois - Téléchargée 228 fois

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.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
8
Date d'inscription
mardi 4 décembre 2007
Statut
Membre
Dernière intervention
20 janvier 2009

Bonjour à tous les deux,

D'abord je vous remercie pour vos commentaires.
Je n'ai pas encore étudier ta proposition MANGAII, mais quand j'en aurai le temps le reprendrais mon code pour le rendre plus générique.

Et j'espère que tu en seras pleinement satisfait MGALTERO.

J'ai fait ce bout de code sans avoir de connaissances particulière en JavaScript.
Mon objectif, c'était qu'il ne soit pas trop difficile à maintenir et simple d'utilisation.
Je vais quand même essayer de m'améliorer dans cette technologie.

Merci encore pour vos réponses.

@+ lycanges
Messages postés
8
Date d'inscription
vendredi 26 septembre 2003
Statut
Membre
Dernière intervention
25 juin 2012

Bonjour,
Moi qui suis complètement nez-au-fite, je viens de tester et je trouve ça super !
Je vais dépesser pour tout comprendre.
Je garde au chaud. Reste à savoir où utiliser... Mais je trouverai bien.
Merci lycanges

MG
Messages postés
129
Date d'inscription
dimanche 9 décembre 2001
Statut
Membre
Dernière intervention
12 janvier 2009

Pas mal, mais un peu lourd pour ce que c'est.
- Pense à simplifier et à mutualiser !
- N'oublie pas que tu peux aussi passer des paramètres à tes fonctions.
- Utilise des variables "globales" pour les limites (et pourquoi pas le comptage)

Globales : limiteTop LimiteBottom ne doivent pas être définies plusieurs fois ! c'est un risque d'erreur (d'en oublier). Sors ces variables des fonctions, elles seront accessibles dans les fonctions, directement (sans le var).
Par la même occasion, tu peux mettre en globales (hors fonction) une variables qui compte combien tu as d'éléments (ça éviterai d'avoir à recompter à chaque fois) (ex: var countInput=0;)

Quand tu appelle buttonMore() et buttonLess(), donne en paramètres le nom du div pour afficher les inputs. C'est simple, mais ça permet de dissocier tes fonctions du code HTML ! C'est pas bien de forcer l'utilisateur à devoir appeler son div 'div_input' (et si je veux l'appeler autrement ?). En utilisant "buttonMore('MonDivAMoi');", tu ouvre la porte à la possibilité d'avoir plusieurs divs avec des inputs différents ...

Dans les fonctions buttonMore et buttonLess tu teste exactement la même chose : les limites ! créé une fonction checkLimites(n), qui fait les tests et renvoi true/false !
Comme ça, ta fonction fonction buttonMore se résume à:

var limitTop = 20;
var limitBottom = 0;
var number = 0;
function buttonMore( nomDiv )
{
if( checkLimites( number + 1 ) ) // teste si on peut ajouter
{
createInput( nomDiv );
}
}

J'espère que j'ai été clair ...
Je te laisse continuer.

Nico

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.