OnClick event handling of a period button in JavaScript form

On click event of a period button can be used to process different actions. This event can be connected to submission of a form or can be connected to redirecting to different pages or the page it self can be reloaded. Here is a simple example of on click event of a period button where the page is reloaded with the available value of the clicked period button. We will not discuss how to use the value available after the page reloads and you can get an idea in our PHP section on this. Here we will discuss how to reload the page with the value of the checked period button.

Here is our two period buttons with OnClick event calling a function in JavaScript.

<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.

Outside the loop we will redirect the page with the value of the period button clicked using a query string.

self.location='dd.php?cat=' + val ;

Demo of the onlclick event of radio button

You can select and see the query string in your address bar with the value of the period button.

Here is the code of the JavaScript function and below that the period 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>

Submitting the form automatically onclick of a radio button ( without a submit button )

We can submit a form directly when user clicks the period or radio button. Here is the code

<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 Handling onMouseOver and onMouseOut

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com

alex	03-03-2012
Good article, helped a lot. Thanks