CODEWITHSUNDEEP
jquery
Bart
Bart

Reputation: 565

How to add an incremental counter to the name of each new element

I have a form for ordering parts (id, descr, amount). But one order can consist out of multiple parts so I want to create a button that dynamically adds extra fields with unique names/id's so I can access them in PHP.

Ideally I want to add 1, 2, 3 etc to the end of the name of the added element. The problem is I don't now how to select the specific added element.

I simplified the code a bit because the if I have the solution for this fields the others can be fixed the same.

var i = 0;

$('#addfields').click(function(){
    $('#tablerow').after('<tr><td>Article id</td>' +
                     '<td><input class=article_id type=text></td></tr>');

    $('.article_id').each(function(){
        $(this).attr('name', 'articleid' + i);
        i++;
    });

Upvotes: 0

Views: 70

Answers (2)

Ivan Modric
Ivan Modric

Reputation: 619

You could just as easily do it without jQuery (which would be a little faster).

var articles = document.getElementsByClassName("article_id");

for (var i=0; i<articles.length; i++) {
    articles[i].name = "articleid" + (i+1);
}

Upvotes: 0

user5547025
user5547025

Reputation:

jQuery.each calls the callback with a parameter index. Use it.

$('.article_id').each(function(index, value) {
    this.name = 'articleid' + index;
});

Upvotes: 2

Related Questions