个人中心
gpt4 book ai didi

javascript - jQuery 克隆表单在同一页面中无法工作两次

转载 作者：行者123 更新时间：2023-12-02 16:32:09 24 4
gpt4 key购买 nike

我试图在同一页面中使用相同的表单两次，该表单可以工作一次，但不能工作两次，我认为问题出在 id 或其他东西上，但我不确定我不太擅长 javascript

感谢帮助。

<!DOCTYPE html>
<html>
<head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    <script>




    $(function () {
    $('#btnAdd').click(function () {
        var num     = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value


        // H2 - section
        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);

        // Title - select
        newElem.find('.label_ttl').attr('for', 'ID' + newNum + '_title');
        newElem.find('.select_ttl').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');

        // First name - text
        newElem.find('.label_fn').attr('for', 'ID' + newNum + '_first_name');
        newElem.find('.input_fn').attr('id', 'ID' + newNum + '_first_name').attr('name', 'ID' + newNum + '_first_name').val('');




    // Insert the new element after the last "duplicatable" input field
        $('#entry' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDel').attr('disabled', false);

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        if (newNum == 5)
        $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 
    });

    $('#btnDel').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and iPhone.
        if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
            {
                var num = $('.clonedInput').length;
                // how many "duplicatable" input fields we currently have
                $('#entry' + num).slideUp('slow', function () {$(this).remove();
                // if only one element remains, disable the "remove" button
                    if (num -1 === 1)
                $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false).prop('value', "add section");});
            }
        return false; // Removes the last section you added
    });
    // Enable the "add" button
    $('#btnAdd').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel').attr('disabled', true);
});







    </script>
</head>

<body>
    <div id="wrapper">
    <div class="sign-up_box">
        <form action="#" method="post" id="sign-up_area">
            <div id="entry1" class="clonedInput">
                <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>


               <fieldset>
                    <label class="label_ln" for="last_name">Last name:</label>
                    <input class="input_ln" type="text" name="last_name" id="last_name" value="">
                </fieldset>

            </div><!-- end #entry1 -->

            <div id="addDelButtons">
                <input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
            </div>





            <fieldset class="form-actions">
                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </div><!-- end sign-up_box -->
  </div>







      <div id="wrapper">
    <div class="sign-up_box">
        <form action="#" method="post" id="sign-up_area">
            <div id="entry1" class="clonedInput">
                <h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>


               <fieldset>
                    <label class="label_ln" for="last_name">Last name:</label>
                    <input class="input_ln" type="text" name="last_name" id="last_name" value="">
                </fieldset>

            </div><!-- end #entry1 -->

            <div id="addDelButtons">
                <input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
            </div>





            <fieldset class="form-actions">
                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </div><!-- end sign-up_box -->
  </div>







    </body>
</html>

最佳答案

ID 标记在 HTML 文档中必须是唯一的，否则将无法正常工作。您可能想要“class”而不是“id”，并使用 jQuery 类选择器来选择适当的字段，具体取决于您想要执行的操作。

以下是一些与此相关的现有 StackOverflow 问题:

Using same ID for in multiple HTML tags?

Several elements with the same ID responding to one CSS ID selector

javascript duplication ID conflict

关于javascript - jQuery 克隆表单在同一页面中无法工作两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28204584/

24 4 0
文章推荐： Javascript:打印类属性
文章推荐： javascript - 如何解决我的案例中的单元测试问题
文章推荐： javascript - 它继承自的字符串的原型(prototype)是什么？
文章推荐： javascript - 从 Playstation 官方网站抓取奖杯数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com