jQuery - Ajouter / supprimer des Champs de Saisie dans le Formulaire
J'ai cherché et je ne pouvais pas trouver une réponse à résoudre mon problème ici. Je suis assez noobish avec jQuery, et je cherche à ajouter/supprimer des champs de saisie de deux domaines différents. J'ai essayé d'éditer mon jQuery et HTML code pour accueillir la deuxième partie, je tiens à ajouter/supprimer (objets trouvés), mais je ne peux pas le faire fonctionner. Toute aide serait grandement appréciée!
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd2').click(function() {
var num2 = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num2 + 1); //the numeric ID of the new input field being added
//create the new element via clone(), and manipulate it's ID using newNum value
var newElem2 = $('#input2' + num2).clone().attr('id', 'input2' + newNum);
//manipulate the name/id values of the input inside the new element
newElem2.children(':first').attr('id', 'name' + newNum).val(null);
//insert the new element after the last "duplicatable" input field
$('#input2' + num2).after(newElem2);
//enable the "remove" button
$('#btnDel2').attr('disabled','');
});
$('#btnDel2').click(function() {
var num = $('.clonedInput2').length; //how many "duplicatable" input fields we currently have
$('#input2' + num).remove(); //remove the last element
//enable the "add" button
$('#btnAdd2').attr('disabled','');
//if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel2').attr('disabled','disabled');
});
$('#btnDel2').attr('disabled','disabled');
});
</script>
HTML:
<form id="myForm" action="process_call.php" method="post">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Charge: <input type="text" name="name[]" id="name1" />
</div>
<div>
<input type="button" id="btnAdd" value="Add Another Charge" />
<input type="button" id="btnDel" value="Remove Charge" />
</div>
<div id="input2" style="margin-bottom:4px;" class="clonedInput2">
Item Found: <input type="text" name="item[]" id="item1" />
</div>
<div>
<input type="button" id="btnAdd2" value="Add Another Item" />
<input type="button" id="btnDel2" value="Remove Item" />
</div>
<input type="submit">
</form>
OriginalL'auteur MarkA2049 | 2013-09-03
Vous devez vous connecter pour publier un commentaire.
Le problème était le sélecteur de
$('#input2' + num2)
lorsque le script est exécuté en premier, il y a un seul élément avec l'idinput2
, mais votre sélection est à la recherche d'un élément avec l'idinput21
qui n'existe pas.Je l'ai fixée par clonage le dernier élément avec la classe
clonedInput2
au lieu de trouver l'élément avecid
Démo: Violon
OriginalL'auteur Arun P Johny