1

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?

Improve this question
7
  • Is there any reason why you're not setting value="" inside the option tag ? Commented Jul 23, 2012 at 12:48
  • Not directly related to your question, but onclick="document.testform.a.value = document.testform.b.value = document.testform.c.value = '1'" is shorter than onclick="document.testform.a.value='1'; document.testform.b.value='1'; document.testform.c.value='1'" (but does the same thing). Though it seems to me that having three fields that always have the same value is a bit redundant. Commented Jul 23, 2012 at 12:49
  • @sjobe I am not doing this because I haven't seen a way where I can add multiple values at once doing this eg how would it add a different value for a,b,c? Commented Jul 23, 2012 at 12:52
  • Yes that can be done jsut tell me which all different values you want for a, b, c??? Commented Jul 23, 2012 at 13:01
  • Is there any rhyme or reason to the values that the select is assigning the inputs? I am looking for a programmatic way to generate the values. If there's a formula for them, it can be included to save you effort in maintaining this. Commented Jul 23, 2012 at 13:03

2 Answers 2

Reset to default
4

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.

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

8 Comments

Nice answer! Gave an upvote for your effort in seeing it to the end. Sadly, the comments on the OP now look like different values may be necessary for the inputs?
@Vins This works better than what I had thanks however my mistake in describing my question the values of a,b,c may be different, I have updated my question to reflect this.
@ak85 Please check now. whether this meets your requirement. I've updated the fiddle link.
@Vins this looks great thanks a lot, this was what I was trying to do
@Vins I notice you changed your fiddle from 11 to 12 to include the if statement. Why was this? I couldn't see anything wrong with 11?
|
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).

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.