如何使用jQuery动态添加表单元素 [英] How to use jQuery to add form elements dynamically
本文介绍了如何使用jQuery动态添加表单元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的html：
< div id =extraPerson>
< div class =controls controls-row>
< input class =span3placeholder =First Nametype =textname =firstname2>
< input class =span3placeholder =Last Nametype =textname =lastname2>
... ETC
< / div>
< / div>
< a href =＃id =addRow>< i class =icon-plus-sign icon-white>< / i>添加另一家庭成员< / a>< / p>< / a>
这是我的jquery：
<脚本>
$（document）.ready（function（）{
$（'＃addRow'）。click（function（）{
$（＃extraPerson）。slideDown（）;
}）;
}）
< / script>
#extraPerson隐藏在css中。
它在点击链接时添加div。但是，我希望它在每次链接被点击时继续添加相同的div。我该怎么做呢？如果它将数字附加到表单输入名称，则更好。例如firstname3，firstname4等。
解决方案
试试这个方法： - $ / $>
演示
HTML
创建一个模板 extraPersonTemplate 并使用它进一步构建。
< div class =extraPersonTemplate>
< div class =controls controls-row>
< input class =span3placeholder =First Nametype =textname =firstname2>
< input class =span3placeholder =Last Nametype =textname =lastname2>
< select class =span2name =gender2>
< option value =男>男< / option>
< option value =女性>女性< / option>
< / select>
< / div>
< / div>
< div id =container>< / div>
JS
$（document）.ready（function（）{
$（'< div />'，{$ b $'class'：'extraPerson'，html：GetHtml（）
$（'＃addrow'）。click（function（）{
$（'< div /> $ b}）。appendTo（'＃container'）; //从模板获取html $ b $ ;'，{$ b $'class'：'extraPerson'，html：GetHtml（）
）。hide（）。appendTo（'＃container'）。slideDown（'slow'）; // Get
$ b}）;
}）
函数GetHtml（）//获取模板并更新输入字段名称
{
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;
返回$ html.html（）;
}
Small Css
.extraPersonTemplate {
display：none;
}
Here is my 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>
And this is my jquery:
<script>
$(document).ready(function(){
$('#addRow').click(function(){
$("#extraPerson").slideDown();
});
})
</script>
The #extraPerson is hidden in the css.
It adds the div when the link is clicked. However, I want it to continue adding the same div each time the link is clicked. How do I do this? Even better if it appends the number to the form input names. Eg firstname3, firstname4 etc.
解决方案
Try this way:-
Demo
HTML
Create a template extraPersonTemplate and use it to construct further. Add a container tyo your content section.
<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();
}
Small Css
.extraPersonTemplate {
display:none;
}
这篇关于如何使用jQuery动态添加表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
