<input type=radio name=type value='male' onclick="reload()";>Male
<input type=radio name=type value='female' onclick="reload()";>Female
You can see the onclick event is calling function reload(). Inside the function reload we will have some object properties to identify the different objects. Here is one to identify the number of period buttons used inside the form.
document.form1.type.length
Here form1 is the name of the form and type is the name of the period button. From this length value we will loop through one for loop to check each element status ( checked or not ). We can get the status of the period button by checking the value of
document.form1.type[i].checked
Which returns true or false if the button is clicked or not. The value of i changes inside the for loop. If the period button is checked then we will get the value of that button and we will store that value in a variable declared as val.
self.location='dd.php?cat=' + val ;
Demo of the onlclick event of radio button<html>
<head>
<title></title>
<script type="text/javascript">
function reload()
{
for(var i=0; i < document.form1.type.length; i++){
if(document.form1.type[i].checked)
var val=document.form1.type[i].value
}
self.location='dd.php?cat=' + val ;
}
</script>
</head>
<body >
<form name=form1 method=post action=action_page.php>
<b>Type</b><input type=radio name=type value='male' onclick="reload()";>Male
<input type=radio name=type value='female' onclick="reload()";>Female
<input type=submit value=Submit>
</form>
</body>
</html>
<form name=f1 action='''' method=post>
<INPUT TYPE=RADIO NAME=rone Value=1 onClick=''f1.submit()'';>
<INPUT TYPE=SUBMIT value=Submit NAME=Vote>
</form>
Event HandlingonMouseOver and onMouseOut
alex | 03-03-2012 |
Good article, helped a lot. Thanks |