Как использовать jQuery для динамического добавления элементов формы

Вот мой 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>

И это мой jquery:

<script>
    $(document).ready(function(){
        $('#addRow').click(function(){
            $("#extraPerson").slideDown();
         });
    })
</script>

#ExtraPerson скрыт в css.

Он добавляет div при нажатии ссылки. Тем не менее, я хочу, чтобы он продолжал добавлять один и тот же div каждый раз, когда нажимается ссылка. Как мне это сделать? Еще лучше, если он добавляет число к именам ввода формы. Например, firstname3, firstname4 и т.д.

Ответы

Ответ 1

Попробуйте так:

демонстрация

HTML

Создайте шаблон extraPersonTemplate и используйте его для дальнейшей разработки. Добавьте контейнер в раздел содержимого.

<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>

JS

  $(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();    
}

Маленький Css

.extraPersonTemplate {
    display:none;
}

Ответ 2

Я придумал свое решение. Много комментариев, но не стесняйтесь спрашивать.

$(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();
         });
    })

Мне нравится тот факт, что @PSL использует шаблон, хотя, может быть, это более легкое решение. Обратите внимание, что вам нужно будет добавить код для обновления номера человека там...

Скрипка: http://jsfiddle.net/Mk7MQ/

Ответ 3

и сценарии Pevara и PSL не работают должным образом, все имена/идентификаторы новых строк совпадают с первыми, поэтому невозможно получить значения из них позже в сценарии .substring(index+9,1) следует исправить на .substring(index+9,index+10) но даже после следующего всегда будет == 2 как $ person.html(); не был действительно изменен

Вот три варианта решения: 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