Use jQuery to increment array in field name

Question

I have a form that allows users to automatically add blocks of fields to it. For various reasons these fields need to be associated with other fields in their blocks. I am accomplishing this by putting all my fields in each block in an array like you see below

<select name="items[0][item_type]" class="item_type">
     <option value="0">Bulding / Landscaping</option> 
     <option value="1">Full / Thin Veneer</option> 
</select>

<select class="select_custom" name="items[0][standard]">
      <option value="0">Standard</option> 
      <option value="1">Custom</option> 
</select>

This will give me back something like Array ( [0] => Array ( [item_type] => 0 [standard] => 1 ) ) which will allow me to easily handle the data on the back end.

The problem is that the array index must be specified in order for this to work. When I append a new block of fields like the one above I need a way to change the index on all the items[][fieldname].

Below is the code that I use to append the block of inputs to the document. They are all contained within a div so I simply clone that div and append it after the last one.

$('#more_fields').click(function(){
    $('.field_group:first').clone(true).hide().insertAfter('.field_group:last').slideDown('slow');
        var last = $('.field_group:last');
        last.append(new_button.clone(true));
        last.find('select').val([]);
        last.find(".custom_products").css("display","none");
        last.find(".unit_selection").css("display","none");
        last.find(".landscape_selection").css("display","none");
        last.find(".veneer_selection").css("display","none");
        last.find(".comments_section").css("display","none");
        last.find(".standard").css('display','none');
    });

I believe you should be able to just use items[][item_type] — mishik
– mishik, Commented Jul 7, 2013 at 19:05
Doesn't work because when it sees the next occurrence of items the index will automatically increment. I need an associative array — ed209
– ed209, Commented Jul 7, 2013 at 19:32

mishik · Accepted Answer · 2013-07-07 20:11:57Z

1

You can omit the index completely, it will be automatically handled upon form submition:

<select name="item_type[]" class="item_type">
  <option value="0">Bulding / Landscaping</option> 
  <option value="1">Full / Thin Veneer</option> 
</select>

<select class="select_custom" name="item_standard[]">
  <option value="0">Standard</option> 
  <option value="1">Custom</option> 
</select>

To have index incremented for each new group:

Demo

var current =  $(".field_group").length - 1;
last.find('select.item_type')
  .attr("name", "items[" + current + "][item_type]");
last.find('select.select_custom')
  .attr("name", "items[" + current + "][standard]");

edited Jul 7, 2013 at 20:11

answered Jul 7, 2013 at 19:06

mishik

10k9 gold badges48 silver badges69 bronze badges

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

5 Comments

ed209 Over a year ago

This won't accomplish what I am looking for because the fields need to be associated with one another.

mishik Over a year ago

Well, they are linked via index number. Same index number in two arrays for each item. You can convert them to array of dicts on the server side.

ed209 Over a year ago

In my instance they aren't. There is not necessarily always one option selected in every field. There is a lot more to my form than what I posted, I just posted it to give a sense of the structure.

ed209 Over a year ago

Since I'm not using drupal I don't see the relevance of the anchored post. Everything further down the page just reinforces that I am heading in the right direction and simply need what my question states I need.... a way to change the index in jquery

mishik Over a year ago

Ok, then. Please share the code you use to create new elements.

Collectives™ on Stack Overflow

Use jQuery to increment array in field name

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related