add value to form array on click

Question

I have the below code working onclick.

<form action="" name="testform" method="post" id="testform">
<input type="hidden" value="" name="a">
<input type="hidden" value="" name="b">
<input type="hidden" value="" name="c">
<select>
    <option value=""></option>
    <option value="" onclick="document.testform.a.value='12'; document.testform.b.value='111'; document.testform.c.value='123'">1</option>
    <option value="" onclick="document.testform.a.value='21'; document.testform.b.value='222'; document.testform.c.value='232'">2</option>
    <option value="" onclick="document.testform.a.value='32'; document.testform.b.value='333'; document.testform.c.value='233'">3</option>
    <option value="" onclick="document.testform.a.value='43'; document.testform.b.value='444'; document.testform.c.value='344'">4</option>
    <option value="" onclick="document.testform.a.value='54'; document.testform.b.value='555'; document.testform.c.value='345'">5</option>
</select>     

When you select 1 the hidden fields of a,b,c get the value of 1.

This works fine however I have a larger project in mind here where the user can select multiple values for 'a' throughout the form. Without onclick I can get this working well eg

<input type="hidden" name="a[]" value="1">

But when I do

<form action="" name="testform" method="post" id="testform">
<input type="hidden" value="" name="a[]">
<input type="hidden" value="" name="b[]">
<input type="hidden" value="" name="c[]">
<select>
    <option value=""></option>
    <option value="" onclick="document.testform.a[].value='12'; document.testform.b[].value='111'; document.testform.c[].value='123'">1</option>
    <option value="" onclick="document.testform.a[].value='21'; document.testform.b[].value='222'; document.testform.c[].value='232'">2</option>
    <option value="" onclick="document.testform.a[].value='32'; document.testform.b[].value='333'; document.testform.c[].value='233'">3</option>
    <option value="" onclick="document.testform.a[].value='43'; document.testform.b[].value='444'; document.testform.c[].value='344'">4</option>
    <option value="" onclick="document.testform.a[].value='54'; document.testform.b[].value='555'; document.testform.c[].value='345'">5</option>
</select>     

I get nothing inserted into my hidden value.

Why is this?

Is there a better way of doing what I am trying to do with jQuery?

Answer 1

Here is the modified jsfiddle link for your problem. http://jsfiddle.net/et3r7/12/ Please check if this helps you. I've made hidden to text in order to display the result you can make it them to hidden.

I had cleaned up your code little bit. Removed all the onClick code.

Answer 2

I don't think that .value is a property of an array. (Actually, I'm a derp, it may be a property of an array element - I'll look it up) I would also look at the push() method of an array for adding elements.

There are a couple other ways you could approach this task. With JS, you could abstract this a little, and make a single function to do the work that each click is doing, which would make your code much more succinct.

This is easily done if jQuery, too, but I would be evaluating whether this bit of functionality is worth the additional download (jQuery is 32KB minified and zipped).