11521 sujets

JavaScript, DOM et API Web HTML5

Un formulaire qui se duplique

bonjour,
Je voudrais faire un formulaire de saisie d'information multiple. Le nombre d'information n'étant pas fixe je veux lui donner la possibilité de cliquer un bouton qui génère d'autres zones de saisies, seulement las données étant différentes chaque zone de saisie créée doit avoir son attribut "name" différent des autres pour le traitement. Je suis à cours d'idées. Help me please Smiley sweatdrop 

<html>
	<head>
	</head>
	</body>

		<form name="formulaireDynamique">
		   <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
		   <br /><br />
		   <input type="submit" value="soumettre"/>
		</form>

		<script type="text/Javascript" >
		   function ajout(element){
		      var formulaire = window.document.formulaireDynamique;
		      // On clone le bouton d'ajout
		      var ajout = element.cloneNode(true);
		      // Crée un nouvel élément de type "input"
		      var champ = document.createElement("input");
		      // Les valeurs encodée dans le formulaire seront stockées dans un tableau
		      champ.name = "champs[]";
		      champ.type = "text";
		        
		      var sup = document.createElement("input");
		      sup.value = "supprimer un champ";
		      sup.type = "button";
		      // Ajout de l'événement onclick
		      sup.onclick = function onclick(event)
		         {suppression(this);};
		        
		      // On crée un nouvel élément de type "p" et on insère le champ l'intérieur.
		      var bloc = document.createElement("p");
		      bloc.appendChild(champ);
		      formulaire.insertBefore(ajout, element);
		      formulaire.insertBefore(sup, element);
		      formulaire.insertBefore(bloc, element);
		   }
		   
		   function suppression(element){
		   var formulaire = window.document.formulaireDynamique;
		        
		   // Supprime le bouton d'ajout
		   formulaire.removeChild(element.previousSibling);
		   // Supprime le champ
		   formulaire.removeChild(element.nextSibling);
		   // Supprime le bouton de suppression
		   formulaire.removeChild(element);
		}
		</script>
	</body>
</html>

j'en suis là. ici j'ai juste un input mais je compte ajouter des input, select, des boutons radio (bref une balise div qui contient tout ça) à chaque click. Merci d'avance Smiley cligne
LE plus simple pour rajouter une ligne de composants est de cloner une partie entière du formulaire; en d'autres termes utiliser cloneNode(true) sur un fieldset, div, tr, etc. et ensuite ajouter la partie clonée à la suite des autres.

Pour changer le nom dynamiquement, utilise simplement get/setAttribute. Le mieux est de faire en sorte que le nom n'ait pas besoin de changer, en choisissant des noms comme "choix[]" avec les crochets qui symbolisent un tableau qui sera de taille dynamique; la plupart des langages serveur convertissent les valeurs multiples reçues de cette façon en tableaux. Si tu as plusieurs dimensions tu seras obligé de spécifier un indice à la première dimension. Pour ce faire j'utilise souvent un code comme celui-ci:

element.setAttribute('name', element.getAttribute('name').replace(/\d+/, function(x) { return parseInt(x)+1; }));


Attention aux trous lors des suppressions si les indices sont spécifiés explicitement.
Bonjour j'ai un soucis.

Rebonjour, disons que j'ai une balise div dans laquelle se trouve des élements.

<div id="momo">
<input id="monIp" name="alu"> <select id="sel1"><option>opt1</option><option>opt1</option></select>
</div>

si je fais ainsi dans le jquery.

var maVariable=$("#momo").clone();

comment pourrais-je proceder pour modifier l'attribut name de #monIP qui vient d'être créer par clonage?
Merci d'avance.
a écrit :
comment pourrais-je proceder pour modifier l'attribut name de #monIP qui vient d'être créer par clonage?


Un truc comme ça devrait fonctionner, non ?

$('[name=alu]', maVariable) .attr('name', 'XXXXXX');

Modifié par QuentinC (04 Jul 2016 - 06:12)
Sujet clos
Aller à