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
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
5 Answers
Reset to default 3You 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>