admin管理员组

文章数量:1356753

I am newbie to java script and trying to achieve the following and was looking for suggestions:

Create two radio buttons and whenever we select on radio button it should navigate to some URL like in the below example XYZ or ABC

<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" value=""     name="userChoice" id="navRadio01">
 <label for="navRadio01">XYZ</label><br> 
<input type="RADIO" value=""    name="userChoice" id="navRadio02" checked>
        <label for="navRadio02">ABC</label><br>  
<input type="BUTTON"  value="Go"    onclick="ob=this.form.userChoice;for(i=0;i<ob.length;i++){
    if(ob[i].checked){window.open(ob[i].value,'_self');};}" style="color:#FFFFF;background-color:#E0E0E5;font-family:verdana;border-style:solid;" />
</fieldset>
</form>
</html>

I have used the Go button in the above example how can we do this, without using the Go button and once selected navigate to that link.?

Please advice.

Thank you all in advance.

- V

I am newbie to java script and trying to achieve the following and was looking for suggestions:

Create two radio buttons and whenever we select on radio button it should navigate to some URL like in the below example XYZ. or ABC.

<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" value="http://xyz."     name="userChoice" id="navRadio01">
 <label for="navRadio01">XYZ</label><br> 
<input type="RADIO" value="http://abc."    name="userChoice" id="navRadio02" checked>
        <label for="navRadio02">ABC</label><br>  
<input type="BUTTON"  value="Go"    onclick="ob=this.form.userChoice;for(i=0;i<ob.length;i++){
    if(ob[i].checked){window.open(ob[i].value,'_self');};}" style="color:#FFFFF;background-color:#E0E0E5;font-family:verdana;border-style:solid;" />
</fieldset>
</form>
</html>

I have used the Go button in the above example how can we do this, without using the Go button and once selected navigate to that link.?

Please advice.

Thank you all in advance.

- V

  • javascript
  • html
Share Improve this question asked Apr 16, 2013 at 17:45 NaiduNaidu 151 gold badge1 silver badge4 bronze badges 1
  • 2 Why do you want to use radio buttons and not anchor tags, which are more semantically correct? – Alex Lynham Commented Apr 16, 2013 at 17:52
Add a ment  | 

5 Answers 5

Reset to default 3

You can do it using the "onclick" event handler for radio buttons, like this:

<input type="RADIO" value="http://abc." onclick="window.open(this.value)" name="userChoice" id="navRadio02" checked>

Please note that as stated in the ments to your question, anchor tags are better suited to do this.

Try this example:

<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" name="userChoice" id="navRadio01" onclick="window.location='http://google.'">
<input type="RADIO" name="userChoice" id="navRadio02"  onclick="window.location='http://yahoo..'">
</fieldset>
</form>
</html>

Hope it helps...

Have a look here:

Calling onclick on a radiobutton list using javascript

There's a bit of a debate and then a full example at the bottom.

You can pass a reference of the radio button to a function triggered by the radio button's onclick event. Then within the function, you open the link specified by the radio button's value.

For example, function openLink opens a link based upon the radio button's value.

<script>
function openLink(radio){
 window.open(radio.value,'_self');
}
</script>

Then in the body of the HTML page, you pass a reference to the radio button when it is clicked, to function openLink:

<fieldset>
<input type="radio" id="fname"  value="http://www.abc." name="name1" onclick="openLink(this)">

<input type="radio" value="http://www.xyz." id="fname2" name="name1" onclick="openLink(this)">
</fieldset>


<html>
<table width="450">
<tr>
<td style="background-color:#FFFFFF;"><h4>Choose a Field</h4></td>
</tr>
</table></br>
<form action="../">
<fieldset>
<input type="RADIO" name="userChoice" id="navRadio01" onclick="window.location='http://google.'">
<input type="RADIO" name="userChoice" id="navRadio02"  onclick="window.location='http://yahoo..'">
</fieldset>
</form>
</html>

本文标签： javascriptRadio button on select navigation to URLStack Overflow

版权声明：本文标题：javascript - Radio button on select navigation to URL - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744000612a2573790.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。