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, Jul 07 '13 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, Jul 07 '13 at 19:32

mishik · Accepted Answer · 2013-07-07T20:11:57.210

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 07 '13 at 20:11

answered Jul 07 '13 at 19:06

mishik

9,973
9
45
67

This won't accomplish what I am looking for because the fields need to be associated with one another. – ed209 Jul 07 '13 at 19:32
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. – mishik Jul 07 '13 at 19:33
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 Jul 07 '13 at 19:36
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 – ed209 Jul 07 '13 at 19:46
Ok, then. Please share the code you use to create new elements. – mishik Jul 07 '13 at 19:48

Use jQuery to increment array in field name

1 Answers1