如何使用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动态添加表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！