Voici mon html:
<div id="extraPerson">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname2">
<input class="span3" placeholder="Last Name" type="text" name="lastname2">
<select class="span2" name="gender2"><option value="Male">Male</option><option value="Female">Female</option></select>
...ETC
</div>
</div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
Et voici mon jquery:
<script>
$(document).ready(function(){
$('#addRow').click(function(){
$("#extraPerson").slideDown();
});
})
</script>
Le #extraPerson est caché dans le css.
Il ajoute la div lorsque le lien est cliqué. Cependant, je veux qu'il continue à ajouter la même div chaque fois que le lien est cliqué. Comment puis-je faire cela? Encore mieux s’il ajoute le numéro aux noms des entrées de formulaire. Par exemple, prénom3, prénom4 etc.
Essayez de cette façon: -
Créez un modèle extraPersonTemplate
et utilisez-le pour construire davantage. Ajoutez un conteneur pour votre section de contenu.
<div class="extraPersonTemplate">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname2">
<input class="span3" placeholder="Last Name" type="text" name="lastname2">
<select class="span2" name="gender2">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div id="container"></div>
$(document).ready(function () {
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).appendTo('#container'); //Get the html from template
$('#addRow').click(function () {
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion.
});
})
function GetHtml() //Get the template and update the input field names
{
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name="firstname" + len;
$html.find('[name=lastname]')[0].name="lastname" + len;
$html.find('[name=gender]')[0].name="gender" + len;
return $html.html();
}
.extraPersonTemplate {
display:none;
}
Je suis venu avec une solution de mon cru. Beaucoup de commentaires, mais n'hésitez pas à demander.
$(document).ready(function(){
$('#addRow').click(function(){
// get the last person and html html
var $person = $('.person').last();
var person = $person.html();
// find the number
var index = person.indexOf('firstname');
var number = parseInt(person.substring(index+9,1));
var next = number+1;
// replace the number
// for firstname
person.replace('firstname'+number, 'firstname'+next);
// for lastname
person.replace('lastname'+number, 'lastname'+next);
// for gender
person.replace('gender'+number, 'gender'+next);
// insert the new person after the last one
$person.after($('<div class="person">'+person+'</div>'));
// get the new person
var $new = $('.person').last();
// hide it
$new.hide();
// reset the values
$new.find('input, select').val('');
// fade it in
$new.slideDown();
});
})
J'aime le fait que @PSL utilise un modèle, mais pourrait être une solution plus facile. Notez que vous devez ajouter le code pour mettre à jour le numéro de personne qui y figure ...
Un violon: http://jsfiddle.net/Mk7MQ/
les scripts Pevara et PSL ne fonctionnent pas correctement tous les nouveaux noms/identifiants de lignes sont identiques au premier, il n’existe donc aucun moyen d’obtenir ultérieurement les valeurs correspondantes dans le script .substring(index+9,1)
doit être corrigé en .substring(index+9,index+10)
même que le suivant sera toujours == 2 comme $ person.html (); n'ont pas vraiment changé
voici 3 options de solution: https://www.jqueryscript.net/form/jQuery-Plugin-To-Dynamically-Add-More-Form-Fields-czMore.html
(https://www.codexworld.com/add-remove-input-fields-dynamically-using-jquery/ } _
_ { https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery } _