用jQuery动态添加两个表单元素

问题描述

我试图创建两个表单元素，当用户点击一个按钮时，他可以做5次，但我是jQuery的新手，所以我遇到了问题，

这里是代码：

  $（document）.ready（function（）{
 $（' #btnAdd'）。click（function（）{
 var num = $（'。clonedInput'）。length; 
 var numTwo = $（'。clonedInputTwo'）。length; 
 var newNum = new Number（num + 1）; 
 
 var newElem = $（'＃input'+ num）.clone（）。attr（'id'，'input'+ newNum）; 
 var newElemTwo = $（'＃inputTwo'+ numTwo）.clone（）。attr（'id'，'input'+ newNum）; 
 
 
 newElem.children（'：第一'）。attr（'id'，'name'+ newNum）.attr（'name'，'name'+ newNum）; 
 newElemTwo.children（'：first'）。attr（'id'， 'name'+ newNum）.attr（'name'，'name'+ newNum）; 
 
 
 $（'＃input'+ num）.after（newElem）; 
 $（'＃inputTwo'+ numTwo）.after（newElemTwo）; 
 
 $（'＃btnDel'）。attr（'disabled'，''）; 
 
 if（newNum == 5）
 $（'＃btnAdd'）。attr（'disabled'，'disabled'）; 
}）; 
 $ b $（'＃btnDel'）。click（function（）{
 var num = $（'。clonedInput'）。length; //我们目前有多少个可复制输入字段有
 $（'＃input'+ num）.remove（）; //删除最后一个元素
 $（'＃inputTwo'+ num）.remove（）; //删除最后一个元素
 
 //启用添加按钮
 $（'＃btnAdd'）。attr（'disabled'，''）; 
 
 //如果只有一个元素仍然存在，禁用删除按钮
 if（num-1 == 1）
 $（'＃btnDel'）。attr（'disabled'，'disabled'）; 
} ）; 
 
 $（'＃btnDel'）。attr（'disabled'，'disabled'）; 
}）; 
  

HTML：

 < form id ='myForm'> 
< div id ='input1'style ='margin-bottom：4px;'class ='clonedInput'> 
名称：< input type ='text'name ='name1'id ='name1'/> 
< / div> 
< div id ='inputTwo1'style ='margin-bottom：4px;'class ='clonedInputTwo'> 
学校：< input type ='text'name ='nameTwo1'id ='nameTwo1'/> 
< / div> 
< div> 
< input type ='button'id ='btnAdd'value ='add another name'/> 
< input type ='button'id ='btnDel'value ='remove name'/> 
< / div> 
< / form> 
  

当我点击该按钮时，它会工作一次，然后它继续创建名称元素，并且没有学校元素！

解决方案

  var newElemTwo = $（'＃inputTwo'+ numTwo）.clone （）.attr（'id'，'input'+ newNum）; 
  

应该是

  var newElemTwo = $（'＃inputTwo'+ numTwo）.clone（）。attr（'id'，'inputTwo'+ newNum）; 
  

以（感谢MvanGeest）

I am trying to create two form elements when the user clicks a button, which he can do 5 times, but I am new to jQuery so I am running into problems,

here is the code:

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num     = $('.clonedInput').length;
        var numTwo     = $('.clonedInputTwo').length;
        var newNum  = new Number(num + 1);

        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'input' + newNum);


        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
        newElemTwo.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);


        $('#input' + num).after(newElem);
        $('#inputTwo' + numTwo).after(newElemTwo);

        $('#btnDel').attr('disabled','');

        if (newNum == 5)
            $('#btnAdd').attr('disabled','disabled');
    });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element
            $('#inputTwo' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });

The HTML:

<form id='myForm'>
    <div id='input1' style='margin-bottom:4px;' class='clonedInput'>
        Name: <input type='text' name='name1' id='name1' />
    </div>
    <div id='inputTwo1' style='margin-bottom:4px;' class='clonedInputTwo'>
        School: <input type='text' name='nameTwo1' id='nameTwo1' />
    </div>
    <div>
        <input type='button' id='btnAdd' value='add another name' />
        <input type='button' id='btnDel' value='remove name' />
    </div>
</form>

When I click the button it works once, then it just proceeds to create name elements, and no school elements!

解决方案

var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'input' + newNum);

should be

var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'inputTwo' + newNum);

Take a look (thanks to MvanGeest)

这篇关于用jQuery动态添加两个表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！