如何使用jQuery动态添加表单元素

Posted 2023-05-08

【中文标题】如何使用jQuery动态添加表单元素

【英文标题】：How to use jQuery to add form elements dynamically

【发布时间】：2013-05-20 14:57:17

【问题描述】：

这是我的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 等。

【问题讨论】：

extraPerson 没有“添加”任何东西，它已经存在。您是如何创建其他表单的？

用不同的表单名更新了答案

【参考方案1】：

试试这个方法：-

Demo

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;

【讨论】：

用每行不同的输入名称更新了答案。

你好@PSL，在这个例子中，我如何删除插入的行。

【参考方案2】：

我想出了自己的解决方案。大量的 cmets，但请随时询问。

$(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 脚本都不能正常工作 所有新行名称/id 都与第一个相同，因此无法在脚本中稍后从它们获取值 .substring(index+9,1) 应更正为 .substring(index+9,index+10) 但即使比下一个总是 ==2 作为 $person.html();并没有真正改变

这里有 3 个解决方案选项： 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