生成 jQuery 表单字段以及标签中的 sno

发布于 2024-12-26 11:58:25 字数 2658 浏览 2 评论 0原文

我需要一个表单来动态生成表单元素。到目前为止，我已经修改了一个脚本来添加另一个字段 txtEmail1 ，它工作正常，并在用户点击添加按钮后生成字段。

现在我需要在标签“全名”前加上序列号。 1、2、3、4 等等。我尝试过，但无法正确执行，需要专家的帮助。

<script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

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

                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);

                // enable the "remove" button
                $('#btnDel').attr('disabled','');

                // business rule: you can only add 5 names
                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

                // 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');
        });
    </script>
</head>
 <body>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div>
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                  <label id="lblSno1"></label>  Full Name
                    <input name="name1" type="text" class="TextBoxNext" id="name1" /></td>
                    <input name="txtEmail1" type="text" class="TextBoxNext" id="txtEmail1" /></td>
   </div>
</form>
</body>

我还需要将计数分配给某个隐藏字段，以便我可以对用户创建的字段数量运行插入查询。

原文

I need a form to generate form elements dynamically. So far I have modified a script to add another field txtEmail1 and it works fine and generates fields once a user hits the add button.

Now I need to prefix label "Full Name" with serial no. 1, 2, 3, 4 and so on. I tried but I am not able to get it right need an experts help with this.

<script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

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

                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);

                // enable the "remove" button
                $('#btnDel').attr('disabled','');

                // business rule: you can only add 5 names
                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

                // 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');
        });
    </script>
</head>
 <body>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div>
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                  <label id="lblSno1"></label>  Full Name
                    <input name="name1" type="text" class="TextBoxNext" id="name1" /></td>
                    <input name="txtEmail1" type="text" class="TextBoxNext" id="txtEmail1" /></td>
   </div>
</form>
</body>

I also need to assign the count to some hidden field, so that I can run an insert query on the number of fields that the user created.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寻找一个思念的角度 2025-01-02 11:58:25

尝试如下操作。我对您的代码结构做了一些修改，即：
* 创建一个隐藏模板，所有可见克隆都将从中克隆
* 让添加/删除按钮按需要工作
* 添加隐藏字段来保存项目数量
* 将大量代码放入函数中以供重用

<script type="text/javascript">

    // document - on load
    $(document).ready(function() {

        // add the first item
        AddInput();
        UpdateButtons();

        // add button - click
        $('#btnAdd').click(function() {
            AddInput();
            UpdateButtons();
        });

        // delete button - click
        $('#btnDel').click(function() {
            $('.clonedInput:last').remove();
            UpdateButtons();
        });

    });

    function AddInput()
    {
        // how many cloned input fields we currently have
        var numItems = $('.clonedInput').length; 
        var newNum = new Number(numItems + 1);

        // create the new element via clone() based on hidden template
        var newElem = $('.templateInput').clone();

        // update attributes on parent tag
        newElem.attr('id', 'input' + newNum);
        newElem.attr('class', 'clonedInput');
        newElem.show();         

        // update child elements
        newElem.children('#lblSno').html(newNum + ' ' + newElem.children('#lblSno').html());
        newElem.children('#lblSno').attr('id', 'lblSno' + newNum);
        newElem.children('#name').attr('id', 'name' + newNum);
        newElem.children('#txtEmail').attr('id', 'txtEmail' + newNum);

        // insert the new element
        $('#allInputs').append(newElem);
    }

    function UpdateButtons()
    {
        // get number of items
        var numItems = $('.clonedInput').length;

        // only enable delete button when there is more than 1 item
        if (numItems > 1)
            $('#btnDel').removeAttr('disabled');
        else
            $('#btnDel').attr('disabled', 'disabled');

        // only enable add button when there are less than 5 items
        if (numItems < 5)
            $('#btnAdd').removeAttr('disabled');
        else
            $('#btnAdd').attr('disabled', 'disabled');

        // update the hidden field
        $('#hdnNumItems').val(numItems);                
    }
</script>

<form>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
        <input type="hidden" id="hdnNumItems" value="0" />
    </div>
    <div id="allInputs">
        <div class="templateInput" style="margin-bottom:4px; display:none;">
            <label id="lblSno">Full Name</label> 
            <input name="name" type="text" class="TextBoxNext" id="name1" /></td>
            <input name="txtEmail" type="text" class="TextBoxNext" id="txtEmail1" /></td>
        </div>
    <div>
</form>

Try something like the following. I've made a few modifications to the structure of your code, namely:
* Creating a hidden template that all visible clones will be cloned from
* Getting the add/remove buttons working as desired
* Added hidden field which holds the number of items
* Putting bulk of code into functions for re-use

<script type="text/javascript">

    // document - on load
    $(document).ready(function() {

        // add the first item
        AddInput();
        UpdateButtons();

        // add button - click
        $('#btnAdd').click(function() {
            AddInput();
            UpdateButtons();
        });

        // delete button - click
        $('#btnDel').click(function() {
            $('.clonedInput:last').remove();
            UpdateButtons();
        });

    });

    function AddInput()
    {
        // how many cloned input fields we currently have
        var numItems = $('.clonedInput').length; 
        var newNum = new Number(numItems + 1);

        // create the new element via clone() based on hidden template
        var newElem = $('.templateInput').clone();

        // update attributes on parent tag
        newElem.attr('id', 'input' + newNum);
        newElem.attr('class', 'clonedInput');
        newElem.show();         

        // update child elements
        newElem.children('#lblSno').html(newNum + ' ' + newElem.children('#lblSno').html());
        newElem.children('#lblSno').attr('id', 'lblSno' + newNum);
        newElem.children('#name').attr('id', 'name' + newNum);
        newElem.children('#txtEmail').attr('id', 'txtEmail' + newNum);

        // insert the new element
        $('#allInputs').append(newElem);
    }

    function UpdateButtons()
    {
        // get number of items
        var numItems = $('.clonedInput').length;

        // only enable delete button when there is more than 1 item
        if (numItems > 1)
            $('#btnDel').removeAttr('disabled');
        else
            $('#btnDel').attr('disabled', 'disabled');

        // only enable add button when there are less than 5 items
        if (numItems < 5)
            $('#btnAdd').removeAttr('disabled');
        else
            $('#btnAdd').attr('disabled', 'disabled');

        // update the hidden field
        $('#hdnNumItems').val(numItems);                
    }
</script>

<form>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
        <input type="hidden" id="hdnNumItems" value="0" />
    </div>
    <div id="allInputs">
        <div class="templateInput" style="margin-bottom:4px; display:none;">
            <label id="lblSno">Full Name</label> 
            <input name="name" type="text" class="TextBoxNext" id="name1" /></td>
            <input name="txtEmail" type="text" class="TextBoxNext" id="txtEmail1" /></td>
        </div>
    <div>
</form>

回复收藏 0 原文

欢烬 2025-01-02 11:58:25

有成千上万种方法可以完成您想要做的事情，这完全取决于您选择使用哪一种。因此，在不扰乱您的逻辑并简单地使用您自己的代码的情况下，为了添加序列号，只需添加这一行：

newElem.text(newNum + " ) Full Name " );

就是这样。您已经预先添加了序列号。

There are thousands of ways to do what you are trying to do, and it's all entirely depends upon your choice which one to use. So, without messing with your logic and simply going with your own code, in order to add serial numbers, just add this one line :

newElem.text(newNum + " ) Full Name " );

That's it. You've got your serial number prepended.

回复收藏 0 原文

~没有更多了~

关于作者

落叶缤纷

暂无简介

文章

24 人气

关注发私信

友情链接

文江博客

生成 jQuery 表单字段以及标签中的 sno

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

尘曦

在梵高的星空下

善良天后

韬韬不绝

qq_CgiN62

不美如何

友情链接

生成 jQuery 表单字段以及标签中的 sno

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

尘曦

在梵高的星空下

善良天后

韬韬不绝

qq_CgiN62

不美如何

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。