How can I increment the value of an input array?

Question

I have an area on my website that I allow users to update their profile information.

html

<div class="my-class">
    <input type="text" name="fields[myFieldHandle][1][fields][firstName]" value="">
    <button type="button" id="add">Add Another</button>
</div>

jquery

$('#add').click(function (event) {
    $('.my-class').clone().insertAfter('div.my-class');
});

All is well, I am able to clone the text input. However, I need to be able to increment the [1] value by one. I could try matching the string, but I feel that is assuming quite a bit. Is there a more effective way to clone this:

<input type="text" name="fields[myFieldHandle][1][fields][firstName]" value="">

to this:

<input type="text" name="fields[myFieldHandle][2][fields][firstName]" value="">

jsFiddle

Rick Hitchcock · Accepted Answer · 2015-11-29 23:47:08Z

1

Instead of cloning the first div, clone the last one so you'll get the last input.

You can then increment its number as follows:

$('#add').click(function (event) {
  $('.my-class:last')
    .clone()
    .insertAfter('div.my-class:last')
    .find('input')                                       //get the input
    .attr('name', function(_, currentValue) {            //get its current value
      return currentValue.replace(/\d/, function(num) {  //replace the numeric part
        return +num + 1;                                 //with its value + 1
      });
    });
});

Fiddle

edited Nov 29, 2015 at 23:47

answered Nov 29, 2015 at 23:40

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

How can I increment the value of an input array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related