克隆表单和增量 [英] Clone form and increment

问题描述

我有一个表格，我想克隆，增加id（att1），它是输入，textareas等并附加到与会者div。任何帮助非常感谢。我已经破坏了我的头...

我只有...

pre $ $（function（）{
var index = 1;

$ b $（$。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>参加者1 Booking Booking< / span>< / legend> 
< p name =test> 
< label for =A_Title_1>标题：< span class =req> *< / span>< / label> 
< input name =A_Title_1id =A_Title_1value =type =textclass =f_input/> 
< / p> 
 
< p> 
< label for =A_Forename_1> Forename：< span class =req> *< / span>< / label> 
< input name =A_Forename_1id =A_Forename_1type =textclass =f_input/> 
< / p> 
 
< p> 
< label for =A_Surname_1>姓：< span class =req> *< / span>< / label> 
< input name =A_Surname_1id =A_Surname_1type =textclass =f_input/> 
< / p> 
 
< p> 
< label for =A_Info_1>其他信息：< / label> 
< textarea name =A_Info_1id =A_Info_1cols =20rows =10>< / textarea> 
< span class =info>请包括任何有关饮食/访问/特殊要求的信息。< / span> 
< / p> 
< / fieldset> 
< / div> 
< a href =＃class =add>添加更多< / a> 
 
< / div> 
  

解决方案

请参阅 fiddle 。

添加课程参加者到 div id =att1

 < div id =att1class =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 （假设prev sib是标签）
 this.name = this.id = newId; //更新标识和名称（假设相同）
}）。end（）//返回.attendee 
 .attr（'id'，'att'+ attendeesCount）//更新与会者ID 
 .prependTo（'＃attendees'）; //添加到容器
}; 
 
 $（'。add'）。click（addAttendee）; //附加事件
}）; 
  

I have a form below that I want to clone, increment the id(att1) and it's inputs, textareas etc and append to the attendees div. Any help much appreciated. Been wrecking my head...

All I have is...

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

解决方案

See the fiddle.

Add a class attendee to the div id="att1"

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

And the 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
});

这篇关于克隆表单和增量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！