繁体   English   中英

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

[英]Dynamically adding two form elements with 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(':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');
    });

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>

当我单击按钮时,它可以工作一次,然后就可以继续创建名称元素,而没有学校元素!

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

应该

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

看一看 (感谢MvanGeest)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM