Add fields to form using Javascript with re-indexing

Question

I am creating a dynamic form where a person is able to add/remove extra charfields, much like "Attach Another File" forms. For reference:

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

JAVASCRIPT

$(function () {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function () {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#remScnt').live('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

Problem is I need to reindex the Field Names and IDs in case the person deletes a middle field. That is, if person adds extra fields 0,1,2,3 and then deletes '2', the remaining should be reindexed to 0,1,2.

Tomanow · Accepted Answer · 2014-02-22 22:34:43Z

2

There were some issues and improvements I made with your code available in this FIDDLE. Important: your system duplicates IDs, which is no good. I've switched the selectors to classes. I've added a reindex function for you.

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

JS

$(function () {
    function reIndex() {
        $('.p_scnt').each(function (k, v) {
            $(this).attr('name', 'p_scnt_' + k);
        });
    }
    reIndex();
    $('#addScnt').click(function () {
        var i = $('.p_scnt').length + 1;
        $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo($('#p_scents'));
        reIndex();
        $('.remScnt').click(function () {

            if (i > 1) {
                $(this).parents('p').remove();
                reIndex();
                i--;
            }
            return false;
        });
    });
});

Also, if you want to start number at 1 instead of 0 for the names, just modify this line:

$(this).attr('name', 'p_scnt_' + (k+1));

answered Feb 22, 2014 at 22:34

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel Jiménez Over a year ago

If this is the solution, do not forget to accept it.

Community · Accepted Answer · 2017-05-23 10:30:31Z

0

May be after deleting the one of the fields you could change de name attribute of all the remaining. I found something that could be useful for you in this link: Jquery change name attribute

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Feb 22, 2014 at 22:25

dpuertas

234 bronze badges

Comments

Miguel Jiménez · Accepted Answer · 2014-02-22 22:44:01Z

0

By adding the following code you are changing the name attribute in each input (after removing the selected one):

$('#p_scents input[type="text"]').each(function(i){
    $(this).attr('name', 'p_scnt_' + (i + 1));
});

Modified html:

<h2>
    <a href="#" class="addScnt">Add Another Input Box</a>
</h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" size="20" id="someid1" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

Modified functions:

$('#addScnt').live('click', function() {
    $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" id="someid_' + i + '" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);

    i++;
    return false;
});

$('#remScnt').live('click', function() { 

    if( i > 2 ) {
        $(this).parents('p').remove();
        i--;

        $('#p_scents input[type="text"]').each(function(i){
            $(this).attr('name', 'p_scnt_' + (i + 1));
        });
    }

    return false;
});

Working demo: http://jsfiddle.net/tZPg4/9001/

I corrected one more thing. The id attribute must be unique by element, so every time you create a new element be sure you are adding the index at the end of the string (in your case).

edited Feb 22, 2014 at 22:44

answered Feb 22, 2014 at 22:26

Miguel Jiménez

1,3031 gold badge16 silver badges24 bronze badges

1 Comment

Dev Uberoi Over a year ago

Yes I am changing the ids to keep them unique. Although i haven't tested your code because Tomanow's answer worked for me. Thanks for the effort. :)

Collectives™ on Stack Overflow

Add fields to form using Javascript with re-indexing

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related