How to increment id's on Input fields with Jquery on clone

Question

I am trying to increment a form field ID so they are all different when i click on the plus to create a new row of input fields.

Here is my code so far

//Order Form
    $("#add").click(function() {
        $('#ordertable tbody>tr:last').clone(true).insertAfter('#ordertable tbody>tr:last');
        $('#ordertable tbody>tr:last #prodcode').val('');
        $('#ordertable tbody>tr:last #meterage').val('');
        $('td.imgsample:last a').remove();
        return false;
    });

On the first line within the click function how can i change the input fields (prodcode & meterage) to be prodcode1 meterage1 e.t.c

jitter · Accepted Answer · 2010-11-18 13:18:22Z

3

Assuming you are going to do this more often then once.

//Somewhere global
var counter = 0;
//Order Form
$("#add").click(function() {
    counter++;
    var cln = $('#ordertable tbody>tr:last').clone(true);
    cln.find("[id^='prodcode'], [id^='meterage']").each(function(i, val) {
        val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter;
    });
    cln.insertAfter('#ordertable tbody>tr:last');
    $('#ordertable tbody>tr:last #prodcode').val('');
    $('#ordertable tbody>tr:last #meterage').val('');
    $('td.imgsample:last a').remove();
    return false;
});

Of course there are "cleaner" solutions without using a global counter

For the problem mentioned in the first comment something along the lines of

$("tr [id^='prodcode'], tr [id^='meterage']").live("blur", function() {
    ....
    $(this).val() //instead of $("#prodcode").val()
    ....
});

should do

edited Nov 18, 2010 at 13:18

answered Nov 18, 2010 at 12:42

jitter

54.8k11 gold badges114 silver badges130 bronze badges

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

7 Comments

Andy Over a year ago

How can i work this in with the id created? Before it was running this script perfectly. Now i need the #prodcode to carry through the id $("#prodcode").blur(function() { $.post( 'public/themes/lbd/js/searchimage.php', //this page reads the image code and gives you the image location { action: 'searchimage', imgreference: $('#prodcode').val() }, function(data) { //export the link as data $("td.imgsample").html(data); } ); });

Andy Over a year ago

The code above Jitter actually prints 0 and 1 for every additional row, it doesnt increment anymore than that?

Nick Craver Over a year ago

You should rename the i in .each(function(i, val) { to get the desired result.

jitter Over a year ago

The 0 and 1 and then no increment issue was as Nick Craver pointed out a naming issue I had to vars with name i

jitter Over a year ago

Updated my post with code that should work now. As you want to clone the last tr the cln.find(..) got a bit more complex

|

Z. Zlatev · Accepted Answer · 2010-11-18 12:53:31Z

0

$('#ordertable tbody>tr:last #prodcode')
.val('')
.attr(
  'id', function(i,id) {
         match = id.match(/\d+?$/);
         if ( match.length ) { match++; return 'prodcode' + match } // could be match[0], may return array!
         else return id + 1 // or '2' if you wish
        }
);

same for next element.

answered Nov 18, 2010 at 12:53

Z. Zlatev

4,8101 gold badge35 silver badges39 bronze badges

1 Comment

Andy Over a year ago

This doesnt increment anything unfortunately :(

Collectives™ on Stack Overflow

How to increment id's on Input fields with Jquery on clone

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related