Форма и приращение клона

Question

У меня есть форма ниже, которую я хочу клонировать, увеличить идентификатор (att1) и его входные данные, текстовые области и т. Д. И добавить к посетителям div.Любая помощь высоко ценится.У меня разбилась голова ...

Все, что у меня есть ...

$(function () {
        var index = 1;


    $(".add").click(function () {
            index++;

        $("#att1").clone(true).removeAttr("id").attr("id", "att" + index).appendTo("#attendees");
            alert(index);
    });
});

HTML:

    <div id="attendees">
            <div id="att1">
                    <fieldset>
                        <legend><span class="legend">Attendee 1 Booking Details</span></legend>
                        <p name="test">
                        <label for="A_Title_1">Title: <span class="req">*</span></label>
                        <input name="A_Title_1" id="A_Title_1" value="" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Forename_1">Forename: <span class="req">*</span></label>
                        <input name="A_Forename_1" id="A_Forename_1" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Surname_1">Surname: <span class="req">*</span></label>
                        <input name="A_Surname_1" id="A_Surname_1" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Info_1">Additional Info: </label>
                        <textarea name="A_Info_1" id="A_Info_1" cols="20" rows="10"></textarea>
                        <span class="info">Please include any infomation relating to dietary/ access/special requirements you might have.</span>
                        </p>
                    </fieldset>
                    </div>
<a href="#" class="add">Add more</a>

    </div>

Answer 1

См. скрипка .

Добавление класса attendee к div id="att1"

 <div id="att1" class="attendee">

И JS:

$(function(){
    var template = $('#attendees .attendee:first').clone(),
        attendeesCount = 1;

    var addAttendee = function(){
        attendeesCount++;
        var attendee = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + attendeesCount;
            $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .attendee
        .attr('id', 'att' + attendeesCount) // update attendee id
        .prependTo('#attendees'); // add to container
    };

    $('.add').click(addAttendee); // attach event
});

Answer 2

Попробуйте это

    empty_html = $('#att1').html();

    $('.add').click(function() {

        last_id = $('#attendees div:last').attr('id').replace('attr','');

        next_id = last_id++;

        new_div = $('<div id="' + next_id + '">' + empty_html +'<div>');

        $('#attendees').append(new_div);

    });

Требуется несколько настроек вашего HTML, я бы переместил ссылку добавления из раздела посетителей.

Answer 3

Я отправил этот же ответ в другом месте , но здесь я думаю, что он относится и к этому вопросу.

Я создал «оригинальный» элемент и спрятал его на странице. Я добавил «---» к значению любого атрибута, который необходимо увеличить в любых дочерних элементах оригинала.

Всякий раз, когда пользователь нажимал кнопку для создания клона оригинала, я создавал клон, а затем глобально заменял «---» на текущий индекс в HTML-коде этого клона. Примерно так:

var $clone = $original.clone();
var cloneHTML = $clone.html().replace(/---/g, incrementedFieldNum);
$clone.html(cloneHTML);

// Insert and show the clone after the original
$original.after($clone);

Я использовал атрибут данных для хранения обновленных значений incrementedFieldNum (не показано в коде выше).

Надеюсь, это поможет. Это намного меньше кода и это более общее решение, я думаю. У меня было много вложенных элементов, которым нужно было увеличивать идентификаторы и имена, поэтому такое решение, как @Fierceblood, было непрактичным.

Answer 4

Я знаю, что это старая тема .. Я просто хочу поделиться просто способ увеличить идентификатор.я использую один и тот же класс во всех клонированных элементах

ОБНОВЛЕНИЕ:

это более элегантный способ:

var clone_counter = 1; // global variable
$('.clone').click(function(){
   $('.clonethis').clone();
   console.log(clone_counter);
   clone_counter++;
});

Answer 5

Этот пример может вам помочь. пример

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $(document).on('click','#addScnt', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $(document).on('click','#remScnt', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});