Search within TutorialsPark

Javascript Forms: Input Data Controls


Using Javascript to control form Inputs


Javascript Forms: Input Control

JavasScript enables you to alter the contents of a form input dynamically, since each input is an object and has properties and methods for manipulation like any other JavaScript Object.

Using these features, you can assign values to textboxes or textareas, alter values in input fields, add options to drop down menus, validate passwords etc all on the fly.


Javascript Form Inputs: Assign Values to Text Fields

The text object represents the HTML text field <input type="text"> , to reference the value in the text field, the syntax is :

document.form.textboxes.value; , the hierarchy is represented by the diagram below:

DOM Right arrow document Right arrow form Right arrow text


Example: Assigning values to Text boxes

Give it a TRY! » Note: Both the forms are accessed via both name and id attribute.


Javascript forms : password Object

The password object is similar to the text object the only difference being that text do not appear, instead asterisks are displayed.

To reference to the value in textfield, the JavaScript code is document.form.password.value

Example: Javascript Forms password Object.

Give it a TRY! » Note: The event handler is used to verify if the user has entered the correct password.


Javascript forms : textarea Object

In order to have multiple lines of text, a textbox is used. represented by the object textarea

In JavaScript a reference to a value within the textbox is made using code, document.form.textarea.value

Example: Javascript Forms textarea Object

Give it a TRY! » Note: A textbox is used to enter a larger text block.


Javascript forms : Selection Lists

The element <select> is used to create a drop-down or a scroll box, it contains menu items called as options.

JavaScript supports a select object, the select object has the options property, which is an array of all the option items.

The options array also has a selectedIndex property, which represents the index number of the option being selected, starting from 0

To reference a value in selection list using JavaScript the code is as follows: document.form.select.options[n].value;

Example: Javascript Forms select Object.

Give it a TRY! » Note:If no option is selected, the index value is -1.


Javascript forms : select object dynamic update

The below demo, the option selected is updated dynamically using JavaScript events and functions

Example: Javascript Forms select Object dynamic update

Give it a TRY! » Note: Options selected from the list are updated dynamically.


Javascript Forms: Multiple Selects

To select multiple options, the attribute to be used is multiple. Hold down the Ctrl key and then select multiple items

If multiple items are selected, the value of selectedIndex denotes only the first selected option.

The property selected of the options object is used to show if multiple items are selected.It returns a true if multiple options are selected or else a false is returned.

Example: Javascript Forms Multiple Options

Give it a TRY! » Note: Select multiple options holding down Ctrl button, and then press Submit


Javascript Forms: Radio Buttons

A radio button has only two states, ON and OFF. When a radio button is checked it is selected, and when another option is checked, the previous options is deselected. Only one option can be selected.

Radio buttons are created using tag <input type="radio"> , it is represented in JavaScript with object radio which has specific properties and methods to manipulate objects.

Each button is a property of the object radio and are assigned to an array in an order in which they appear in the form.

The property checked of the radio object specifes whether a button is checked by returning true or else a false is returned.

A value is a radio list is targetted using JavaScript Code document.form.radio

Example: Javascript Form radio Buttons

Give it a TRY! » Note:Press select button to apply effects.


Javascript Forms: CheckBoxes

To select multiple options use check boxes, a checkbox has two states, ON and OFF.

Checkboxes are created using tag <input type="checkbox"> , it is represented in JavaScript with object checkbox which has specific properties and methods to manipulate objects.

Each checkbox is a property of the object checkbox and are assigned to an array in an order in which they appear in the form.

The property checked of the checkbox object specifes whether a button is checked by returning true or else a false is returned.

A value is a checkbox list is targetted using JavaScript Code document.form.check

Example: Javascript Form Checkbox Object


Give it a TRY! » Note:Press select button to apply effects.