Solved

radio button open page on click of button

Posted on 2010-09-15
30
169 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
  • 14
  • 12
  • +1
30 Comments
 
LVL 40

Expert Comment

by:gurvinder372
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:gurvinder372
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
 

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:gurvinder372
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
 
LVL 4

Expert Comment

by:acashok
ID: 33689872
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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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:
gurvinder372 earned 500 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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

747 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

13 Experts available now in Live!

Get 1:1 Help Now