Doomtomb
asked on
Using Radio Button to Run an onclick of another Radio Button Group (Ex. included to explain)
I'm having trouble explaining this problem but I think I can with examples.
I want a code that will be able to do the following:
There is a question, "Do you want color?" and there is two radio buttons, O "Yes" and O "No".
When you click on "Yes", a group of radio buttons below is revealed: O "Red" O "Blue" O "Green"
I would like "Red" checked by default.
When you click "No", a group of radio buttons below is revealed: O "Black" O "White"
I would like "Black" checked by default.
Now, on each color there is an onclick="" event. When you click on "Yes" then the onclick event for "Red" should be run (used to calculate a price using Java Script) without having the user to click "Red"
I would also like it for when the user clicks on "No" the onclick="" event for "Black" should be run without the user having to click "Black"
Here is an example of this working: http://www.ibuypower.com/ibp/store/configurator.aspx?mid=224
When you scroll down to "CD/DVD Drive" section "LG 20X Dual Format/Double Layer DVD±R/±RW + CD-R/RW Drive" is selected by default. Then you can click "16x DVD-ROM Drive" and then it runs the onclick event for the default value "Beige" which calculates the price.
Here is my page I am trying to get this working on: http://buildmethebest.com/intel_customdesktop.php
It is under the Power Supply section. 500W is checked by default and then when you click on 530W it doesn't automatically run the onclick event for the radio button underneath it.
I want some way to run that event whether it be onclick or whatever without requiring the user to click the actual button.
I hope this explains my problem and what I am trying to do without being too overly complicated because I think it is a relatively simple fix. Thanks a million.
I want a code that will be able to do the following:
There is a question, "Do you want color?" and there is two radio buttons, O "Yes" and O "No".
When you click on "Yes", a group of radio buttons below is revealed: O "Red" O "Blue" O "Green"
I would like "Red" checked by default.
When you click "No", a group of radio buttons below is revealed: O "Black" O "White"
I would like "Black" checked by default.
Now, on each color there is an onclick="" event. When you click on "Yes" then the onclick event for "Red" should be run (used to calculate a price using Java Script) without having the user to click "Red"
I would also like it for when the user clicks on "No" the onclick="" event for "Black" should be run without the user having to click "Black"
Here is an example of this working: http://www.ibuypower.com/ibp/store/configurator.aspx?mid=224
When you scroll down to "CD/DVD Drive" section "LG 20X Dual Format/Double Layer DVD±R/±RW + CD-R/RW Drive" is selected by default. Then you can click "16x DVD-ROM Drive" and then it runs the onclick event for the default value "Beige" which calculates the price.
Here is my page I am trying to get this working on: http://buildmethebest.com/intel_customdesktop.php
It is under the Power Supply section. 500W is checked by default and then when you click on 530W it doesn't automatically run the onclick event for the radio button underneath it.
I want some way to run that event whether it be onclick or whatever without requiring the user to click the actual button.
I hope this explains my problem and what I am trying to do without being too overly complicated because I think it is a relatively simple fix. Thanks a million.
ASKER
I couldn't get that code to work. Could you explain to me how to apply it?
I put your code with the proper <script type="text/javascript"></s cript> in the <head>
and I put in the radio button for "Yes" and "No" onclick="ApplyColor();" with the correct ids.
Mind you the yes, no, color thing is just an example.
I put your code with the proper <script type="text/javascript"></s
and I put in the radio button for "Yes" and "No" onclick="ApplyColor();" with the correct ids.
Mind you the yes, no, color thing is just an example.
Pls provide your html code
ASKER
Here is code cleaned up and BEFORE implementation of your Java Script.
<form method="POST" action="index.php" name="Build">
<div id="RadioGroup1">
<div id="Group1">
<input type="radio" name="PSU" id="gp1" onclick="Reset(this.parentNode);" Checked>500W
<div id="sub_gp1" style="visibility: visible; display: block;">
<input type="radio" name="500w" id="1" onclick="onClickItem(2,1);" Checked>[Modular] Antec Neo Power<br>
<input type="radio" name="500w" id="2" onclick="onClickItem(2,2);">Apevia Java><br>
<input type="radio" name="500w" id="3" onclick="onClickItem(2,3);">Cooler Master eXtreme<br>
<input type="radio" name="500w" id="4" onclick="onClickItem(2,4);">Silverstone ST50F<br>
</div>
</div>
<div id="Group2">
<input type="radio" name="PSU" id="gp2" onclick="Reset(this.parentNode);">530W
<div id="sub_gp2" style="visibility: hidden; display: none;">
<input type="radio" name="530w" id="5" onclick="onClickItem(2,5);" Checked>[Modular] Raidmax Hybrid><br>
</div>
</div>
</div>
</form>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Great work! This is exactly what I needed. I'll have to make some modifications but this is definitely enough information to get me to the exact code I need.
Thanks.
Thanks.
glad to help.
:)
Open in new window