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:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Buttons, Checkbox, Radio, Select, Option objects

Last accessed pages

  1. Variables and Operators (72)
  2. PHP MySQL - WHERE and LIKE (630)
  3. Working with objects from Library in AS3 (97)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1680)
  5. Script Users Register, Login, Online (780)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (1720)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1680)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (1639)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (1390)
  5. PHP Chat Script (1295)