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
Which attribute specifies the URL address where to send the form-data?
method action name
<form action="script.php" method="post"> ... </form>
Which CSS property can be used to break lines in the middle of words?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Which function sorts the elements of an array into alphabetical order, based on the string values?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicate the function that returns the value of the last element into an array.
current() next() end()
$code = array(10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
Buttons, Checkbox, Radio, Select, Option objects

Last accessed pages

  1. SHA512 Encrypt hash in JavaScript (2224)
  2. Transparent Background, but not the text-content on it (565)
  3. Read Excel file data in PHP - PhpExcelReader (18345)
  4. Creating Mask Layers in Flash (1833)
  5. JavaScript Course - Free lessons (6728)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (24722)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (21405)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (20805)
  4. Read Excel file data in PHP - PhpExcelReader (18345)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (18193)