Prasad Bolla's SharePoint Blog

Click Here to go through the Interesting posts within my Blog.

Click Here to go through the new posts in my blog.

Monday, December 05, 2011

Javascript Radio Button Object


Explanation Basics of HTML form radiobutton

Radio Button Object :
        The following syntax will get the Radio Button object in javascript
Syntax: document.formname.radioname
Example Code:
<form name=testform>
<input name=rb1 value=test type=radio>
<input name=rb2 value=test2 type=radio>
</form>

<script language="javascript">
var rbobject= document.testform.rb1;
</script>

The object cbobject is an array of radio elements. To use the first radio button, we have to call rbobject[0], for second box it is rbobject[1] and so on. Here are the events, dom properties and method associated with Radio Button element.

Event Handlers: Associated with Form type Radio Button:
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing RadioButton events");
}
</script>
Event Handler
Description
Example



onMouseOver
This is invoked when a mouse is moved over the Radio Button
<input type=radio onMouseOver="output()">
Result: ( ) CB1



onMouseDown
This is invoked when a mouse is pressed down on the Radiobutton
<input type=radio onMouseDown="output()">
Result: ( ) CB1



onMouseUp
This is invoked when a mouse is pressed down on the radio and released
<input type=radio onMouseUp="output()">
Result: ( ) CB1



onClick
This is invoked when a mouse click is done on the radio
<input type=radio onClick="output()">
Result: ( ) CB1



onBlur
Executes some code when the Radio Button loses focus using tab
<input type=radio onBlur="output()">
Result: ( ) CB1



onFocus
Executes some code when the radio button gets the focus using tab
<input type=radio onFocus="output()">
Result: ( ) CB1
DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter RadioButton properties in javascript.
The below examples are based on the form
<form name=testrb>
<input name=myrb1 type=radio value=xxx> Checking 1
<input name=myrb2 type=radio value=xxx> Checking 2
</form>
DOM Property
Description
Example



checked
Used to check or select RadioButton selection
To Check:
var ss = document.testb.myrb[0].checked;

To Select:
document.testb.myrb[1].checked = true;

This will select second element.



defaultChecked
Used to check whether the Radio Button is checked by default
To Get:
var ss = document.testb.myrb[0].defaultChecked;



form
Used to get the parent node (form object) of this RadioButton
To Get:
var ss = document.testb.myrb[0].form;



name
Used to get Radio Button name
To Get:
var ss = document.testb.myrb[0].name;



type
Used to get form type
To Get:
var ss = document.testb.myrb[0].type;



value
Used to set or get RadioButton value
To Get:
var ss = document.testb.myrb[0].value;

To Set::
document.testb.myrb[0].value = "testy";




DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like dynamic Radio Button selection using javascript.
DOM Method
Description
Example



click()
Used to dynamically make a Radio Button checked
To Click:
document.testb.myrb.click();



blur()
Used to dynamically make the Radio Button blur
To Blur:
document.testb.myrb.blur();



focus()
Used to dynamically get focus on the Radio Button
To Focus:
document.testb.myrb.focus();




Example: Making Radio Button Select on Mouse Over
<script language=javascript>
function rbevent()
{
var xx = document.xx.rbtest;
xx.checked = true;
}
</script>

<form name=xx>
<input type=radio name=rbtest onMouseOver="rbevent()"> Checking
</form>

Result:
( ) Checking

No comments:

Post a Comment