Utilisation de jQuery pour append de manière dynamic des champs de formulaire (ou ensembles de champs) en fonction d’une valeur de zone de liste déroulante

Comme le titre l’indique, j’essaie de faire en sorte que jQuery ajoute un certain nombre de champs supplémentaires en fonction de la valeur sélectionnée dans une liste déroulante. Par exemple, lorsque la page est chargée, la liste déroulante a une valeur par défaut de 1 et l’ensemble de champs par défaut est affiché. Maintenant, si l’utilisateur sélectionne une valeur différente dans cette liste déroulante, le nombre d’ensembles de champs doit être ajusté en conséquence, par clonage (je suppose que ce serait la meilleure solution). Voici ce que j’ai jusqu’à présent:

Code de boîte déroulante …

 1 item 2 items 3 items 4 items 5 items 6 items  

… le jQuery change auditeur …

 $(document).ready(function() { $("#itemCount").change(function(){ var itemCountVal = jQuery(this).val(); $("#item_dup_1").fieldsManage(itemCountVal); }); }); 

… et la fonction elle-même (elle est en fait basée sur un plugin jQuery que je pensais être un bon sharepoint départ pour ce dont j’avais besoin):

• Sur le formulaire de soumission, retourne false ne fonctionne pas
• Pourquoi $ .post () est-il soumis à la politique de même origine, mais soumettre un formulaire avec method = ‘POST’ est correct?
• Valider des sections d’un formulaire
• Réinitialiser le formulaire MVC avec jQuery
• Sérialiser un formulaire complexe en object JSON à l’aide de jQuery

 jQuery.fn.fieldsManage = function (number) { var clone, objTemplate = source.clone(true), source = jQuery(this), maxClones = number - 1, clones = []; if (clones.length < maxClones) { while (clones.length  maxClones) { // Fieldsets removal function goes here. } } 

L’object en cours de clonage est quelque chose comme

. Je ne pense pas qu’il soit nécessaire de montrer le code complet pour cela aussi.

Cela fonctionne comme un charme pour la première modification, mais si l’utilisateur modifie à nouveau la valeur, les problèmes se produisent, et au lieu d’afficher le nombre correct d’ensembles de champs, il en affiche davantage. On dirait qu’il calcule le nombre de champs nécessaires à partir de zéro, sans tenir compte du fait que des champs ont déjà été ajoutés, et c’est en fait le problème que je me pose. J’ai également une fonction (non illustrée ici juste pour garder la question claire et aussi courte que possible) qui atsortingbue de nouveaux identifiants au groupe de champs cloné pour éviter les identifiants en double et qui fonctionne sans accroc.

Je suis convaincu que je fais quelque chose de mal, mais cela fait deux jours que je me cogne la tête contre un mur, essayant de trouver ce que c’est sans aucune chance, toute aide serait plus qu’appréciée!

Merci d’avance !

• jQuery Champ valide où l’atsortingbut Nom contient des crochets?
• Comment publier du XML sur le serveur via le formulaire HTML?
• Validation HTML5 avant la soumission d’ajax
• Forcer une case à cocher pour toujours soumettre, même si elle n’est pas cochée
• jQuery plugin pour sérialiser un formulaire et également restaurer / remplir le formulaire?

 jQuery.fn.fieldsManage = function (number) { var ele = $(this); var clones = ele.data("clones"); clones = clones ? clones : new Array(ele.attr("id")); if (clones.length < number) { var clone; while(clones.length < number) { clone = ele.clone(true); var id = clones[0]+clones.length; clone.attr("id", id); $("#"+clones[clones.length-1]).after(clone); clones.push(id); } } else { while(clones.length > number) { $("#"+clones.pop()).remove(); } } ele.data("clones", clones); } $(document).ready(function() { $("#itemCount").change(function() { $("#item_dup_1").fieldsManage(this.value); }); }); 

 $(".divWhereTheseGo").empty(); var count = 0; while (count < maxItems) { $(".divWhereTheseGo").append("
your form info
"); count++; }