HTMLHelp Forums > HTML simple problem

HTMLHelp Forums > Web Authoring > General Web Design

horombo

Oct 22 2007, 09:34 AM

I'm trying to make an option menu,

<INPUT TYPE=RADIO NAME="vari1" VALUE="val1">option 1
<INPUT TYPE=RADIO NAME="vari1" VALUE="val2">option 2

using this code i get 2 radio buttons that let me select option 1 or option 2 and either val1a or val 2a is stored in the vari1 variable, this can then be submitted to the cgi.

My problem is; at the same time i need to be able to tell another variable, say vari2 to have value val1b if option 1 is selected and val2b if option 2 is selected without needing another set of radio buttons

any ideas?????

Darin McGrew

Oct 22 2007, 11:16 AM

Why would you need two variables triggered by the same set of radio buttons? Why not just have the server-side (e.g., CGI, PHP) program that processes the form submission do two different things based on a single variable?

With that said, you can use client-side JavaScript to update a hidden value when the radio buttons are toggled. Of course, your server-side program shouldn't rely on any validation or updates done by a client-side progam.

horombo

Oct 22 2007, 11:59 AM

I need 2 variables triggered by same set of radio button because the CGI that the variables are being sent to is a 3rd party site that i have no contol over. I want the user to be able to select the size of the item - which needs to be sent to CGI, different sizes mean different prices - which also need to be sent

Would apprecite a simple example JavaScript to do this if that is possible

Christian J

Oct 22 2007, 06:09 PM

Like this maybe?

CODE

<input type=radio name="vari1" value="val1a"
onclick="document.getElementById('hidden_field').value='val1b';">option 1
<input type=radio name="vari1" value="val2a"
onclick="document.getElementById('hidden_field').value='val2b';">option 2
<input type="hidden" id="hidden_field" name="vari2" value="">

But again note that this will not work for users with javascript disabled.

Another slightly far-fetched idea might be to use an additional couple of radio buttons, hidden with CSS when javascript is enabled, and let the visible pair control the the hidden pair. That way users without javascript might be able to manually change the second par of radio buttons. Here's an example, but I haven't tested what it actually submits:

CODE

<input type=radio name="vari1" value="val1a"
onclick="document.getElementById('hidden_field1').checked=true; document.getElementById('hidden_field2').checked=false;">option 1<br>
<input type=radio name="vari1" value="val2a"
onclick="document.getElementById('hidden_field2').checked=true; document.getElementById('hidden_field1').checked=false;">option 2<br>

<input type="radio" id="hidden_field1" name="vari2" value="val1b"><br>
<input type="radio" id="hidden_field2" name="vari2" value="val2b"><br>

<script type="text/javascript">
// remove "//" comments to hide the radio buttons:
//document.getElementById('hidden_field1').style.display='none';
//document.getElementById('hidden_field2').style.display='none';
</script>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.