jQuery increment input's name's array index for new input element

Question

I've got a form inside of a table, something like this:

<form action="" method="post">
<table>
<tbody class="rowAdder">
<tr>
  <td><input name='info[5]' /></td>
  <td><input name='other_info[5] /></td>
</tr>
</tbody>
</table>
</form>

I want to clone the 'tr' element and in the clone I want to increment the index values.

PHP natively treats input names with "[]" as arrays. But I haven't found any way to easily play with that index value in jQuery.

I know I can use ("input[name$=']']") to find all elements on the page with names ending in ']' but that doesn't help me. I won't always know what the "name" element will look like, so using a cumbersome string index method won't work alone. Although, perhaps an even more cumbersome method will.

I just want to find the names that are arrays and increment them when adding a row. I hope there is a simple, elegant way to do it.

var $array_inputs = clone.find("input[name$=']']");

That works to get the correct elements, although it is clunky. Now I need to increment 5's to 6's

you could build a string markup and increment on that on the concatenation, or clone the object like you said and traverse to change the name — Kevin
– Kevin, Commented Sep 23, 2014 at 4:21
what do you mean? one function to do it all? no. just traverse the intial markup, get the first index, from then on, increment on that by whatever event you need to, (click, etc..), or just simple initialize a simple counter 1, since in the beginning you'll start at one anyway — Kevin
– Kevin, Commented Sep 23, 2014 at 4:24
To traverse the initial markup, I need to get the objects that have array names. If their array indexes were seen as some kind of jquery property then I could increment them easily. — Buttle Butkus
– Buttle Butkus, Commented Sep 23, 2014 at 4:26
simple, if the page initial has already several rows, then get their count (row count), from that count, that will be your starting point — Kevin
– Kevin, Commented Sep 23, 2014 at 4:27

Kevin · Accepted Answer · 2014-09-23 04:38:31Z

1

I don't know which is the best way but clearly, it can be done using a bit of this:

<form action="" method="post">
<table>
<tbody>
<tr>
  <td><input name='info[5]' /></td>
  <td><input name='other_info[5]' /></td>
</tr>
</tbody>
</table>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var last_child = $('table tbody tr:last-child'); // point the last row
    var children_input = last_child.children('td:eq(0)').children('input'); // get the input tag
    var index_num = children_input.attr('name'); // get its attr name
    var get_index = index_num.split('[').pop().split(']').shift(); // extract the index
    alert(get_index);
});
</script>

answered Sep 23, 2014 at 4:38

Kevin

41.9k12 gold badges57 silver badges72 bronze badges

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

5 Comments

Buttle Butkus Over a year ago

That looks pretty good. The code I'm writing is inside of $(".rowChanger").on("click", ".appendRow", function() {, so $(this) is the tbody.rowChanger. In which case I suppose I could use $(this).children().last() to get the last TR. Note the tr has 2 inputs.

Kevin Over a year ago

@ButtleButkus yep, you can implement it using that, and then just point it to the first td children input, then get the attribute name, I assume, info[5] will always match other_info[5] right?, the important thing anyway is get the last index, so that will give you the starting point in which next number you will increment

Buttle Butkus Over a year ago

Thanks and if I wanted to get the row count inside my $('tbody.rowChanger'), how would I do it that way? I tried $(this).length but it didn't work. It always says 1 (perhaps not updating with added rows).

Buttle Butkus Over a year ago

Perhaps I've gotten that: $(this).children().length;

Kevin Over a year ago

@ButtleButkus yes its indeed children().length

Collectives™ on Stack Overflow

jQuery increment input's name's array index for new input element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related