OnClick event handling of a period button in JavaScript formOn 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()";>FemaleYou 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
document.form1.type[i].checkedWhich 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>
| ||||
![]()
| ||||