Search within TutorialsPark

Javascript Forms: Scripting Forms


Using Javascript form properties and Methods to Build forms


Javascript Forms: Reffering to a form using name or id

A form is named using the attribute name, it makes it more easier to reference a form using name attribute rather than using array syntax like forms[0] and forms[1]

A form can also be referenced using the attribute id which is unique to an element. Follow the demo below.

Example: Javascript Form Reference using name or id

Give it a TRY! » Note: Focus on form fields to see the effects.


Javascript forms : Submitting Forms using JavaScript

JavaScript is used to respond to form events using suitable event handlers which are triggered on user activity.

An event handler can be created to control the submission of the form, or to clear all inputs.

The same event handler can also be used to validate input data before submit or reset, without having to refresh the form.

In case or a reset, the user can be confirmed of the same using an event handler

Forms can be validated before being send to the server or reset using three events: onClick , onSubmit and onReset


Javascript forms : onClick Event Handler

The most frequently used event is the onClick event, it is triggered when a user clicks on an element or button

In the below demo, the event onClick is an attribute of the HTML element, the event is triggered when an user clicks on the button, if the event handler function returns a true the form will be submitted or else its rejected

Example: Javascript Forms onClick Event handler

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


Javascript forms : onSubmit Event Handler

Another important form event is onSubmit event, it is triggered when a user clicks the submit button or Enter Key.

In the below demo, the event onSubmit is an attribute of the HTML element, the event is triggered when an user clicks the submit button, if the event handler function returns a true the form will be submitted or else its rejected

Example: Javascript Forms onSubmit Event handler

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


Javascript forms : onReset Event Handler

In order to reset or clear all form fields and set them to their default states the onReset event is used, it is triggered when a user clicks on an element or button with onReset attribute.

In the below demo, the event onReset is an attribute of the HTML element, the event is triggered when an user clicks on the button, if the event handler function returns a true the form will be reset to rhe default state or else its not and can be submitted.

Example: Javascript Forms onReset Event handler

Give it a TRY! » Note: The event handler displays a confirm box to confirm user input.


Javascript forms : this Keyword

When dealing with forms, the keyword this proves to be useful, it is used to reference the current object.

Forms have multiple inputs like checkboxes, radio buttons etc, its is easier to refer the objects using keyword this, rather than using its full name.

Syntax: Javascript Forms this Keyword

Example: Javascript Forms this Keyword

Give it a TRY! » Note: Submit form with empty name field to see the effects.


Javascript Form Methods: submit() and reset()

JavaScript form object provides two methods: submit() and reset(). These methods function similar to event handlers of events onSubmit and onReset

These methods can be used for user confirmation, validate input data etc before sending the form to server for further processing.

Example: Javascript Form Methods submit() and reset()

Give it a TRY! » Note: The name of these methods must be in lower case only.


Javascript Forms: Display form Content within a Popup Window

The Contents of the form can be displayed in a seperate popup window before submitting it to the server

This is achieved by creating a new window and showing within it the form input data dynamically.

Example: Javascript Form contents in a popup

Give it a TRY! » Note: You can event add other confirmation buttons in the window popup.