?
Solved

radio button open page on click of button

Posted on 2010-09-15
30
Medium Priority
?
181 Views
Last Modified: 2013-10-10
First of all I found the solution,  but I want to change the default radio button.  When I change the input type to "image" src="theimage.jpg"  the button does not work anymore. Any ideas on how to get this to work by choosing the radio option, clicking the image,  and going to another page.  

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20852612.html?sfQueryTermInfo=1+10+30+button+link+page+radio
0
Comment
Question by:soccerfan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 12
  • +1
30 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33680155
0
 
LVL 4

Expert Comment

by:ong-hh
ID: 33680161
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript">
        function goURL(radioObj, img) {
            if (!radioObj)
                window.location.href = "#";
            var radioLength = radioObj.length;
            if (radioLength == undefined)
                if (radioObj.checked)
                    window.location.href = "#";
            else
                window.location.href = "#";
           
            for (var i = 0; i < radioLength; i++) {
                if (radioObj[i].checked) {
                    if (i == img) {
                        if (img == 0)
                            window.location.href = "http://www.google.com";
                           else if (img == 1)
                            window.location.href = "http://www.yahoo.com";
                        else if (img == 2)
                               window.location.href = "http://www.hotmail.com";
                    }
                }
            }
        }

       
       
   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    <input id="Radio1" name="Radio1" type="radio"  /><img id="i1" src="18993207-nasa-snoopy.jpg" width=50 height=30 onclick="goURL(window.form1.Radio1, 0)" /></input><br />
    <input id="Radio1" name="Radio1" type="radio" /><img id="i2" src="18993207-nasa-snoopy.jpg" width=50 height=30 onclick="goURL(window.form1.Radio1, 1)" /></input><br />
    <input id="Radio1" name="Radio1" type="radio" /><img id="i3" src="18993207-nasa-snoopy.jpg" width=50 height=30 onclick="goURL(window.form1.Radio1, 2)" /></input><br />


   
    </form>
</body>
</html>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33680178
Ohh...got it
You can give an onclick event to the image
<input type= "image" src="theimage.jpg" onclick="onclickHandler()">

function onclickHandler()
{
   location.href = "www.google.com";
}
0
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

Author Comment

by:soccerfan
ID: 33687771
guryvidner372,  I am not sure how to integrate that into the entire code.  Can you include all the code and how that would intergrate?  

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33688906
Sure, please share the rest of the code, i will integrate this code in it.

As per my understanding, you have an image besides every radio button. When you click on that image, you need to go to a different URL. Please confirm this

In that case, as i have shown above, just give that onclick event handler to that image, and it will do the job for you.

Let me know if more info is needed


0
 

Author Comment

by:soccerfan
ID: 33697558
I don't know how to integrate it so here is the code


<html>
<head>
<script>
function goTo(theButton, rName){
  theForm = theButton.form;
  rButtons = theForm[rName];
  for(i=0;i<rButtons.length;i++){
    if(rButtons[i].checked==true){
      window.location=rButtons[i].value;
    }
  }
}
</script>
</head>
<body>
<form>
<input type=radio name="myRadio" value="www.google.com"> Google
<input type=radio name="myRadio" value="www.yahoo.com"> Yahoo
<input type=radio name="myRadio" value="www.Excite.com"> Excite
<input type=button value="Go" onClick="goTo(this, 'myRadio')">
</form>
</body>
</html>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33701483
try this one
<html>
<head>
<script>
function goTo(theButton, rName)
{
  var rButtons = eval("document.forms[0]." + rName );
  for ( var counter = 0; counter < rButtons.length; counter++ )
  {
	var rButton = rButtons[ counter ];
	if ( rButton.checked )
	{
		alert(rButton.value);
		location.href = rButton.value;
	}
  }
}
</script>
</head>
<body>
<form>
<input type=radio name="myRadio" value="www.google.com"> Google
<input type=radio name="myRadio" value="www.yahoo.com"> Yahoo
<input type=radio name="myRadio" value="www.Excite.com"> Excite
<input type=button value="Go" onClick="goTo(this, 'myRadio')">
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:soccerfan
ID: 33709791
It didn't seem to work.  I changed the input type to image so I could use an image for my button and it just created a pop  up message but did not take me to the website.  Any other ideas.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33715487
<< I changed the input type to image so I could use an image for my button>>
which input's type?

If you have done some changes in the code and tried, please share that with me, so that i can see the exact problem
0
 

Author Comment

by:soccerfan
ID: 33721546
Here is the thing.  I am not sure if you are understanding what I am asking for.  I want the ability through radio buttons to select a radio button and based on that selection go to a different website.  I think you get that part.   The second part I need is that rather than using a default button,  I want to use my own button to click on to take me to the other page. But when I try to change input type "button"  to "image"  it does not work.  
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33722652
Ohh, now i got it
try this,
<html>
<head>
<script>
function goTo(rName)
{
  var rButtons = eval("document.forms[0]." + rName );
  for ( var counter = 0; counter < rButtons.length; counter++ )
  {
	var rButton = rButtons[ counter ];
	if ( rButton.checked )
	{
		alert(rButton.value);
		window.location.href = rButton.value;
		//location.href = "";
	}
  }
}
</script>
</head>
<body>
<form>
<input type=radio name="myRadio" value="www.google.com"> Google
<input type=radio name="myRadio" value="www.yahoo.com"> Yahoo
<input type=radio name="myRadio" value="www.Excite.com"> Excite
<a href="javascript:goTo('myRadio')"><img src="18072010.jpg" style="width:100px;height:100px"\></a>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:soccerfan
ID: 33730456
Still not working. Here is the code I changed it to so the image is displayed and not the button:


<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Google&nbsp; Yahoo&nbsp; Excite</title>
<script>
function goTo(theButton, rName)
{
  var rButtons = eval("document.forms[0]." + rName );
  for ( var counter = 0; counter < rButtons.length; counter++ )
  {
      var rButton = rButtons[ counter ];
      if ( rButton.checked )
      {
            alert(rButton.value);
            location.href = rButton.value;
      }
  }
}
</script>
</head>

<body>
<form>
<input type=radio name="myRadio" value="www.google.com"> Google
<input type=radio name="myRadio" value="www.yahoo.com"> Yahoo
<input type=radio name="myRadio" value="www.Excite.com"> Excite
<input type="image" src="images/add-to-shopping-cart-button.png" value="Go" onClick="goTo(this, 'myRadio')">
</form>
</body>

</html>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33731331
why are you hell bent on using input image tag? i have given the code #33722652 which is using img tag is doing exactly as per your requirement.

<<Here is the code I changed it to so the image is displayed and not the button>>
why? did you checked my last reply? was image not getting displayed? you just had to change the src attribute value of img tag.



0
 

Author Comment

by:soccerfan
ID: 33731898
I missed the fact that you added the img src already.  That was my bad.  I thought I still needed to change the input type.  That being said it still does not work your way either.   I don't know what is going on.  I don't know why it is working on your end but not mine.  When I click button to load the new webpage a pop up comes up.  That is it.  I don't need a pop up,  I need the webpage that is attached to the radio button.
0
 

Author Comment

by:soccerfan
ID: 33731901
Here is a sample of what is happening:   http://www.youthsoccerskills.com/Untitled_2.html .  I didn't load an image but you will get the idea.
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 33733934
ok, change the code to this and try

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
<script>
function goTo(rName)
{
  var rButtons = eval("document.forms[0]." + rName );
  for ( var counter = 0; counter < rButtons.length; counter++ )
  {
	var rButton = rButtons[ counter ];
	if ( rButton.checked )
	{
		alert(rButton.value);
		window.location.href = rButton.value;
		//location.href = "";
	}
  }
}
</script>
</head>

<body>
<form>
<input type=radio name="myRadio" value="http://www.google.com"> Google
<input type=radio name="myRadio" value="http://www.yahoo.com"> Yahoo

<input type=radio name="myRadio" value="http://www.Excite.com"> Excite
<a href="javascript:goTo('myRadio')"><img src="18072010.jpg" style="width:100px;height:100px"\></a>
</form>
</body>

</html>

Open in new window

0
 

Author Comment

by:soccerfan
ID: 33740065
Great,  that worked.  Now I have one more question.  How do I get it to go to the next page, without that pop up.  right now you will see when you click the button it opens a javascript message,  where you hit ok, then it opens to the next page.  Thanks for your help on this. You have been patient and very helpful.  

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33741332
can you update my code in this link itself
http://www.youthsoccerskills.com/Untitled_2.html

so that i can see over internet
0
 

Author Comment

by:soccerfan
ID: 33741400
Ok it is updated now.  I added an image using your code to represent the button.   You will see the pop up.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33741575
It didn't opened up in the pop up for me.
I checked the last radio button, and clicked on image.

I tested on IE8, FF2, Safari4, and Chrome6.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33741612
which browser and its version are you testing on?
0
 

Author Comment

by:soccerfan
ID: 33750013
I tried it in all browsers:  chrome 6, FF 3.6,  IE 9,  Safari
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33752376
can you update my code in this link itself
http://www.youthsoccerskills.com/Untitled_2.html

so that i can see over internet
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33752406
since i checked this link, and i can't see the pop-up opening.
0
 

Author Comment

by:soccerfan
ID: 33758066
Interesting.  Then the next question is,  is there a setting on my internet browsers or computer that is causing the pop up.  
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33767122
For this, you need to explore the options of the respective browser that you are testing on.

0
 

Author Comment

by:soccerfan
ID: 33819423
Gurvinder372,  

I figured out why I kept getting the pop up alert box.   In the you posted there was an alert code. I removed the code and now it works.  Thanks
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

764 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