• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 197
  • Last Modified:

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
0
soccerfan
Asked:
soccerfan
  • 14
  • 12
  • +1
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
Gurvinder Pal SinghCommented:
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
 
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

  • 14
  • 12
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now