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

Related Tutorial
• Period button validation • getElementById

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>

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com

Events Handling in JavaScript

Events

Hide and displaying layers through buttons

Showing Help message on mouseover using Div tag

Progress bar value attributes by button click

Hide and displaying layers through radio buttons

OnClick event of period button

On Double Click event of button and div layer

Text box click event removing data

Selecting all the data of inside textarea by clicking

Default value by using OnFocus event of a text box

OnBlur:Showing help text by using onfocus and onBlur event triggers

Counting the characters dynamically inside a textarea and setting a limit

Copying a set of textbox entered data to another area of a form

Copying data along with drop down list box selection inside a form

Status bar Message on Mouseover event of a link

onunload:Events to execute on exit of the page

Text box onBlur click event changing case

OnMouseOver image changing over a link

OnMousedown and onmouseup event to change background color

OnMousemove event to change background color

OnKeyPress to trigger event

OnKeyDown to trigger event

OnKeyUp to trigger event

Detecting arrow key press event

Detecting key pressed by user

Virtual keyboard : Detecting key pressed based on screen location

clientX and clientY to get horizontal and vertical coordinates

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