Generate jQuery form fields along with sno in a label

Question

Generate jQuery form fields along with sno in a label

679 Views Asked by Learning At 07 April 2025 at 03:23

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.

Original Q&A

There are 2 best solutions below

**Goran Mottram** · Answer 1

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>

**MrClan** · Answer 2

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.

Generate jQuery form fields along with sno in a label

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERYFORM

Trending Questions

Popular # Hahtags

Popular Questions