Increment key within multidimensional array in a form's input field using jQuery clone

Question

I'm trying to piece together info from these two answers, but neither seems to cover the issue in a way that I can extrapolate and get to work for my situation. So please don't punish me if this seems like a duplicate; I don't think it is.

Increment multidimensional array when form fields are cloned

Copy table row and increment all name attributes

<tr>
    <td><input type="text" name="pricing['prices'][0]['label']" value="" /></td>
    <td><input type="text" name="pricing['prices'][0]['price']" value="" /></td>
    <td><input type="text" name="pricing['prices'][0]['expires']" value="" /></td>
    <td><input type="text" name="pricing['prices'][0]['bulk-price']" value="" /></td>
    <td><input type="text" name="pricing['prices'][0]['bulk-qty']" value="" /></td>
</tr>

is what I'm trying to clone, using this button:

<input type="button" id="newRowButton" value="Add Another Price" />

Script (so far the cloning works, but it doesn't change the "0" to a "1". I'm clearly missing something that I couldn't figure out by piecing together the examples in the other two answers)

$("#newRowButton").live('click',function(e) {
    e.preventDefault();
  $("table.tablearray tr:last")
      .clone()
      .find(':input')
      .each(function(){
            this.name = this.name.replace(/\[(\d+)\]$/,
                                          function(str,p1){
                                              return '[' + (parseInt(p1,10)+1) + ']';
                                          });
        })
    .end()
    .appendTo("table")
});

Any help would be appreciated. Ideally I'd also like to add a "delete row" button too.

can you modify the html (add and attribute)?

xmarcos
– xmarcos

2011-12-22 21:09:04 +00:00
Commented Dec 22, 2011 at 21:09 — xmarcos
– xmarcos, Commented Dec 22, 2011 at 21:09

jfriend00 · Accepted Answer · 2011-12-22 21:06:03Z

8

Take out the $ sign from the regex so it's like this:

$("#newRowButton").live('click',function(e) {
    e.preventDefault();
  $("table.tablearray tr:last")
      .clone()
      .find(':input')
      .each(function(){
            this.name = this.name.replace(/\[(\d+)\]/, function(str,p1){
                return '[' + (parseInt(p1,10)+1) + ']';
            });
        })
    .end()
    .appendTo("table")
});

The $ was forcing it to look for [0] at the end of the name which is not what you have.

Working demo here: http://jsfiddle.net/jfriend00/S9Q8W/

answered Dec 22, 2011 at 21:06

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

1 Comment

Grant Over a year ago

What a beautiful answer. Worked perfect for what I needed, thanks :)

lonesomeday · Accepted Answer · 2011-12-22 21:06:23Z

1

You have a slight error in your regex:

this.name = this.name.replace(/\[(\d+)\]$/,

This only matches [0] when that is the end of the element's name, because $ means "the end of the string". If you remove that, the transformation works fine:

this.name = this.name.replace(/\[(\d+)\]/,
                                      function(str,p1){
                                          return '[' + (parseInt(p1,10)+1) + ']';
                                      });

answered Dec 22, 2011 at 21:06

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Collectives™ on Stack Overflow

Increment key within multidimensional array in a form's input field using jQuery clone

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related