Solved

Using Radio Button to Run an onclick of another Radio Button Group (Ex. included to explain)

Posted on 2008-10-08
9
263 Views
Last Modified: 2010-04-21
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.
0
Comment
Question by:Doomtomb
  • 4
  • 3
  • 2
9 Comments
 
LVL 4

Expert Comment

by:sijishJohn
Comment Utility
use this javascript to run the onclick event for "Red"..
function ApplyColor()

    {

       var Rad1 = document.getElementById('<Id of Radio Button>');      

       

       Rad1.checked = true;

       Rad1.onclick();

    }

Open in new window

0
 

Author Comment

by:Doomtomb
Comment Utility
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"></script> 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.
0
 
LVL 4

Expert Comment

by:sijishJohn
Comment Utility
Pls provide your html code
0
 

Author Comment

by:Doomtomb
Comment Utility
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>	

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

Assisted Solution

by:hielo
hielo earned 50 total points
Comment Utility
You code is experiencing a runtime error on this line:
for (var i = 0; i < RadioGroup2.childNodes.length; i++) {

because on this line:
var RadioGroup2 = document.getElementById("RadioGroup2");

RadioGroup2 is set to null, since there is NO element with id="RadioGroup2"

You also have this:
onclick="Reset(this.parentNode); PSU(500);"

but there is NO function named PSU() so  that will give you another error. Furthermore, since you already have an element with name="PSU", you cannot create a function with the same name. Whatever you intend to do with that function, name it something else. Perhaps:
function _PSU(){...}
0
 
LVL 4

Accepted Solution

by:
sijishJohn earned 450 total points
Comment Utility
hope this will help...
<script language="javascript" type="text/javascript">

function onClickItem(var1,var2)

    {

        //do your calculations

        

        document.getElementById('divName').innerText=var2;

    }

    

    function Reset()

    {          

        var Rad1 = document.getElementById('gp1');

        var Rad2 = document.getElementById('gp2');

        var Sub1 = document.getElementById('1');

        var Sub2 = document.getElementById('2');

        var Grp1 = document.getElementById('sub_gp1');

        var Grp2 = document.getElementById('sub_gp2');

        if(Rad1.checked)

        {

            Grp1.style.visibility = "visible";

            Grp1.style.display = "block";

            

            Grp2.style.visibility = "hidden";

            Grp2.style.display = "none";

            

            Sub1.onclick();

        }

        else

        {

            Grp2.style.visibility = "visible";

            Grp2.style.display = "block";

            

            Grp1.style.visibility = "hidden";

            Grp1.style.display = "none";

            

            Sub2.onclick();

        }

    }

    </script>
 
 

<div id="divName">

        500W

        </div>

        <div id="RadioGroup1">

            <div id="Group1" style="border:solid 1px #dcdcdc;">

                <input type="radio" name="PSU" id="gp1" onclick="Reset();" 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>

            <br />

            <div id="Group2" style="border:solid 1px #dcdcdc;">

                <input type="radio" name="PSU" id="gp2" onclick="Reset();">530W

                <div id="sub_gp2" style="visibility: hidden; display: none;">

                    <input type="radio" name="530w" id="5" onclick="onClickItem(2,5);" >[Modular]

                    Raidmax Hybrid><br>

                </div>

            </div>

        </div>

Open in new window

0
 

Author Closing Comment

by:Doomtomb
Comment Utility
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.
0
 
LVL 82

Expert Comment

by:hielo
Comment Utility
glad to help.
0
 
LVL 4

Expert Comment

by:sijishJohn
Comment Utility
:)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now