radio button open page on click of button

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
soccerfanAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Gurvinder Pal SinghConnect With a Mentor Commented:
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
 
Gurvinder Pal SinghCommented:
0
 
ong-hhCommented:
<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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Gurvinder Pal SinghCommented:
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
 
soccerfanAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
soccerfanAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
soccerfanAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
<< 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
 
soccerfanAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
soccerfanAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
soccerfanAuthor Commented:
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
 
soccerfanAuthor Commented:
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
 
soccerfanAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
can you update my code in this link itself
http://www.youthsoccerskills.com/Untitled_2.html

so that i can see over internet
0
 
soccerfanAuthor Commented:
Ok it is updated now.  I added an image using your code to represent the button.   You will see the pop up.
0
 
Gurvinder Pal SinghCommented:
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
 
Gurvinder Pal SinghCommented:
which browser and its version are you testing on?
0
 
soccerfanAuthor Commented:
I tried it in all browsers:  chrome 6, FF 3.6,  IE 9,  Safari
0
 
Gurvinder Pal SinghCommented:
can you update my code in this link itself
http://www.youthsoccerskills.com/Untitled_2.html

so that i can see over internet
0
 
Gurvinder Pal SinghCommented:
since i checked this link, and i can't see the pop-up opening.
0
 
soccerfanAuthor Commented:
Interesting.  Then the next question is,  is there a setting on my internet browsers or computer that is causing the pop up.  
0
 
Gurvinder Pal SinghCommented:
For this, you need to explore the options of the respective browser that you are testing on.

0
 
soccerfanAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.