Building HTML Forms With Arrays

Question

I have a form with elements like:

<div class="row1">
   <select name="someSelectField" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
   <select name="someSelectField" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField" class="checkboxField" value="1" /> checkbox</td>
</div>

These will continue down the page. With lots of different rows of these same fields. There is no set rows as javascript is used to create more rows.

My question is, what should the value of each name attribute be, so that it stays grouped as arrays and can be referenced together? For example, if I use someSelectField[1], when the method is GET, the form sends it like someSelectField[1]=1&someSelectfield[1]=2 (if both are selected). I am looking for it to be someSelectField=1&someSelectfield=2, etc.

Any help would be appreciated. Thanks.

Seems like what you've got above works as is: jsfiddle.net/gilly3/V8sQZ — gilly3
– gilly3, Commented Sep 20, 2011 at 20:22
The problem with the above is that input checkboxes will overwrite and not be an array. Those values will differ from row to row. — fanfavorite
– fanfavorite, Commented Sep 20, 2011 at 20:28
did you try adding [] at the end of the names? that should create an array. for example name="someSelectField[]" — Brian Glaz
– Brian Glaz, Commented Sep 20, 2011 at 20:44

Dave L · Accepted Answer · 2011-09-20 21:05:53Z

1

Why don't you just give the controls unique names? If your javascript is capable of giving the divs indexed class names, you could just restructure the html as so:

<div class="row1">
   <select name="someSelectField1" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField1" class="checkboxField" value="1" /> checkbox</td>
</div>
<div class="row2">
   <select name="someSelectField2" multiple="multiple" class="selectList">
      <option value="1">1</option>          
      <option value="2">2</option>          
   </select>
   <input type="checkbox" name="checkboxField2" class="checkboxField" value="1" /> checkbox</td>
</div>

This has the benefit of being server independent too since some frameworks parse html arrays really well and give you a proper array, and some just overwrite keys.

Your parsing might get a little messy on the back-end if you're allowed to remove elements from the middle instead of just from the end but it shouldn't be too bad. And if that is a concern you could write a simple jQuery script that would line all your names up again. Warning, untested code follows:

$("div[class^='row']").each(function(idx, value) {
    var $value = $(value);
    $value.find(".selectList").attr("name", "someSelectField"+(idx+1));
    $value.find(".checkboxField").attr("name", "checkboxField"+(idx+1));
});

edited Sep 20, 2011 at 21:05

answered Sep 20, 2011 at 20:56

Dave L

1,6349 silver badges10 bronze badges

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

3 Comments

fanfavorite Over a year ago

The problem with this is I need to send a variable with the number of rows on submit. The jsp is setup to get the select fields like: String[] someSelectField = request.getParameterValues("someSelectField");

Dave L Over a year ago

I can't really comment on how you interact with web forms through Java, but you should probably add Java to your tags if that's what you're using.

fanfavorite Over a year ago

I did this and manipulated it with a JS function on submit. Thanks.

Collectives™ on Stack Overflow

Building HTML Forms With Arrays

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related