Is it possible to set the value of two seperate hidden inputs using one select. The select could be a radio group or a drop down menu.

If the question is not clear, here is an example:

Paypal button:

STANDARD CODE

<input type="hidden" name="item_name">
<select name="item_name">
<option value="1">1</option>
<option value="2">2</option>
</select>

<input type="hidden" name="amount" >
<select name="amount">
<option value="200">200.00</option>
<option value="300">300.00</option>
<option value="400">400.00</option>
</select>

Can you achieve these two inputs

<input type="hidden" name="item_name">
<input type="hidden" name="amount" >

Using a single selecting element, as with a radio group or a single selection menu?

might be a bit confused on the question but hidden inputs are not changed by a user....... your code there is always going to return a value of "200.00" if it's hidden.

I've moved this thread to the JavaScript forum since that's likely where your solution will be. You should be able to set up what you want with some JavaScript, DOM, and CSS.

The basic idea would be to have your select call a JavaScript function when it changes. The function could then alter the values of your hidden inputs based on the selection.

If you search a little around the phrase 'dynamic forms' you can probably find some code that's close enough to what you want.

Your answers show my profound confusion about the subject. Let me try again.

Is it possible to set the value of two inputs using one select. The select could be a radio group or a drop down menu.

If the question is not clear, here is an example:

Paypal button:

STANDARD CODE

<select name="item_name">
<option value="a">A</option>
<option value="b">B</option>
</select>


<select name="amount">
<option value="200">200.00</option>
<option value="300">300.00</option>
<option value="400">400.00</option>
</select>

END STANDARD CODE




QUESTION
Can you achieve these two values:
item_name="Value determined by using input A"
amount="Value ALSO determined by using input A"

Larry I think I understand, but let me check. What you want is for when someone makes a selection from the first <select> then the value of the second <select> is automatically chosen for them. Is that right?

One more question with that is will the person filling out the form be able to change that second <select> so maybe they choose option A for the item_name, which sets the value of the amount, and then change to a different amount while still keeping A as the item_name?

Also if the item_name is automatically selecting the amount does the customer need to have the amount choices presented to them?

If the customer can only change the amount by changing the item_name then couldn't they both be in the same select.

<select name="item_name">
<option value="a">A: 200.00</option>
<option value="b">B: 300.00</option>
</select>

If that works I think it's the easiest way to go. If not then I still think you can use some JavaScript to set the second input.

You would add an onchange to the first select. That onchange would call a function that would set the other select.

I think you are asking if there is a way to link two inputs so selecting one will have an effect on the other, but the question is extremely vague.


On the other hand of course you could be asking how to retrieve more details from a database about the item selected and pass that on to the recieving end.
That would be a server side operation.

Originally Posted by vangogh

Larry I think I understand, but let me check. What you want is for when someone makes a selection from the first <select> then the value of the second <select> is automatically chosen for them. Is that right?


If the customer can only change the amount by changing the item_name then couldn't they both be in the same select.

<select name="item_name">
<option value="a">A: 200.00</option>
<option value="b">B: 300.00</option>
</select>

Yes. the amount is completely bound to the item_name. For instance, if item_name 18"x24" is selected, then the amount is $5.10, and there should not be any customer input to change that, as that is the price of the 18 x 24.

As I understand your example, using
<option value="b">B: 300.00</option>
Would set the "item_name" to "B: 300.00"
but would do nothing for the "amount".

Is that correct?

Originally Posted by chrishirst

I think you are asking if there is a way to link two inputs so selecting one will have an effect on the other.

That is exactly what I am asking.

Originally Posted by larryweiss

Is it possible to set the value of two seperate hidden inputs using one select. The select could be a radio group or a drop down menu.

If the question is not clear, here is an example:

Paypal button:

STANDARD CODE

<input type="hidden" name="item_name">
<select name="item_name">
<option value="1">1</option>
<option value="2">2</option>
</select>

<input type="hidden" name="amount" >
<select name="amount">
<option value="200">200.00</option>
<option value="300">300.00</option>
<option value="400">400.00</option>
</select>

Can you achieve these two inputs

<input type="hidden" name="item_name">
<input type="hidden" name="amount" >

Using a single selecting element, as with a radio group or a single selection menu?

Try this example. If it does what you want, I'll explain exactly how to use it, if it's not clear already.
The 'hidden' inputs are replaced with text types to demonstrate the value changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>TEST PAGE</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
<FORM name='f1'>

 <select onchange='selectToHidden(this, h1Values, h2Values)'>
   <option>-Choose-
   <option>1
   <option>2
   <option>3
   <option>4
 </select>
 
<BR><BR><BR><BR><BR><BR>

<input type='text' size='10' name='h1'>&lt;- These values could be<BR>
<input type='text' size='10' name='h2'>&lt;- changed to type hidden.

</FORM>

<SCRIPT type='text/javascript'>

h1Values=['h1','tom','dick','harry','jim'];
h2Values=['h2','apples','oranges','pears','mangoes'];

function selectToHidden(box)
{
 for(var i=1; i<arguments.length; i++)
  box.form[arguments[i][0]].value=(box.selectedIndex > 0) ? arguments[i][box.selectedIndex] : '';
}

</SCRIPT>
</BODY>
</HTML>

Bulls-Eye



What do I change to "amount" and "item_name"

Larry you wouldn't need to actually change the names to amount and item_name, but if you want to it would be the h1Values and h2Values. Make sure the values you want are in the arrays for each.

Also if you do change the names of the arrays make sure to change the line:

<select onchange='selectToHidden(this, h1Values, h2Values)'>

to reflect the new names. You also need to make sure to keep 'h1' and 'h2' in the arrays where they are or you will need to change the names on the inputs.

Originally Posted by larryweiss

Bulls-Eye



What do I change to "amount" and "item_name"

The function takes as its second and subsequent parameters the names of the array(s) holding the data to be sent to the other elements in the same form. You can specify as many as desired.
The first element in each array, represents the name of the target element.

If "amount" and "item_name" are the names of your hidden fields in the same form, you might create two arrays like this:

amountValues=['amount','tom','dick','harry','jim'];
itemValues=['item_name','apples','oranges','pears','mangoes'];

where the first element in each represents the name of the target element.

Each array must contain sufficient elements to match all the options in the select, except the first option, which is not acted upon.

Then in the select tag, you would have:

onchange='selectToHidden(this, amountValues, itemValues)'

Kudos Logic Ali

QED

Thank you