Input text automatique creation suppression
Soyez le premier à donner votre avis sur cette source.
Vue 3 704 fois - Téléchargée 237 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.
Je vous en prit, critiquer sa ne peut être que bénéfique ;)
Bonne journée.
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
- Javascript input text
- Dépesser - Meilleures réponses
- Javascript input - Meilleures réponses
- Javascript : Valider une date entrée dans un input text sans ajouter de séparateurs : - Guide
- Javascript : Redimension automatique d'un textarea ou input texte selon l'évolution de son co - Guide
- Javascript autocomplete input text - Guide
- Javascript : Superbe texte défilant - CodeS SourceS - Guide
- Javascript : Super texte défilant verticalement et disparaissant avec dégradé - - Guide
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
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
- 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.