Buttons, Checkbox, Radio, Select, Option objects

These JavaScript objects can be accessed through the form object.

1. Button, Submit and Reset objects

These objects represent their corresponding form elements.

Properties of the Button, Submit and Reset objects

Methods of the Button, Submit and Reset objects

Events of the Button, Submit and Reset objects


- Example: - Create a form with a button. When you click on it, will call a function that return an Alert with the name of the form and data about the button, than it change its value.
<form action="index.php" method="post" name="frm1" id="frm1">
 Name: <input type="text" name="inp1" />
 <input type="button" name="btn" value="Click" onclick="testFrm1(this)" />
</form>
<script type="text/javascript"><!--
function testFrm1(elm) {
 //gets data
 var frm_name = elm.form.name;
 var elm_name = elm.name;
 var elm_type = elm.type;

 alert("Form name - "+ frm_name+ "\n Element name - "+ elm_name+ "\n Element type - "+ elm_type);

 elm.value = 'OK';        // change value
}
--></script>
- The keyword this transfers to the function a reference of itself.
- The result is:
Name:

2. Checkbox and Radio objects

These objects represent their corresponding form elements.

Properties of the Button, Submit and Reset objects

Methods of the Button, Submit and Reset objects

Events of the Button, Submit and Reset objects


- Example: - Create a form with two checkboxes. When you click on them, will call a function that returns an Alert with the name of the form and data about the clicked checkbox.
<form action="index.php" method="post" name="frm2" id="frm2">
 <input type="checkbox" name="chb1" value="vg" onclick="testFrm2(this)" /> Vegetables
 <input type="checkbox" name="chb2" value="fr" onclick="testFrm2(this)" /> Fruits
</form>
<script type="text/javascript"><!--
function testFrm2(elm) {
 //gets data
 var frm_name = elm.form.name;
 var elm_name = elm.name;
 var elm_value = elm.type;

 alert("Form name - "+ frm_name+ "\n Element name - "+ elm_name+ "\n Value - "+ elm_value);
}
--></script>
- The keyword this transfers to the function a reference of itself.
- The result is:
Vegetables Fruits

3. Select object

Select object represents the form Select element. Form Select can contain multiple Option elements.

Select object properties

Select object methods

Select object events


- Example: - Create a form with a Select that have 5 option items. When click on it changes /sets the "size" attribute at 4, when is changed the item of the list, displays an Alert with a message that contains the index of the selected option and the total number of items; then, onblur remove that option.
<form action="index.php" method="post" name="frm5" id="frm4">
 <select name="select" size="1" onclick="this.size=4" onchange="alert('It waz selected and removed the Option with index: '+ this.selectedIndex+ ' of '+ this.length+ ' items')" onblur="this.remove(this.selectedIndex);">
 <option>Chose an option</option>
 <option value="op1">Option 1</option>
 <option value="op2">Option 2</option>
 <option value="op3">Option 3</option>
 <option value="op4">Option 4</option>
</select>
</form>
- This code will display the fallowing form:

4. Option object

The Option object represents an option in a dropdown Select list in an HTML form.
For each <option> tag in an HTML form, an Option object is created.

Option object properties

Option object methods

Option object events


- Example: - Create a form with a Select that have 2 option items. When click on an option, it calls a function that disables that option and displays an Alert with a message that contains the value and the text of that option.
<form action="" method="post" name="frm6" id="frm6">
 <select name="select" size="1">
 <option>Select an option</option>
 <option value="op1" onclick="getOpt(this)">Option 1</option>
 <option value="op2" onclick="getOpt(this)">Option 2</option>
</select>
</form>
<script type="text/javascript"><!--
function getOpt(opt) {
 opt.disabled=true;         // disables the option

 alert('Value - '+ opt.value+ ' | Text - '+ opt.text);
}
--></script>
- The result is the fallowing form: