JavaScript Form Handling

You can use JavaScript to add interactive effects to your HTML forms.
If you are not familiar with HTML Forms, go through
HTML form tutorial.
The sections below take you through the different interactive effects that you can give to your HTML forms.

JavaScript Form Validation

The most common use of JavaScript will be to add validations to the form. It is commonly required to validate the data type, size, pattern etc. The article
JavaScript Form Validation : quick and easy!
introduces you to the free JavaScript Form Validator script that will make it a lot easier validate your html forms.

Build Web Forms Faaaast!!

Using Simfatic Forms it is very easy to design, create, install and maintain web forms; no coding required!

Quickly create your form, install it and receive form submissions by email.
Click here for more info

Submit Form Using JavaScript

It is commonly required to submit a form programmatically. The article
"How to submit a form using JavaScript"
explains the different methods to submit a form programmatically.

Email a form using JavaScript

You want the data submitted by the user in the HTML form to be emailed to you. But, how to do that? Read the article:
Can JavaScript Email a Form?

Information on formmail script is available in:
Sending HTML Form Data to an Email Address

Dynamically changing the action field

You want to send the form data to different cgi-scripts based on some condition. How to handle such a case?

Read: Switching The HTML Form Action Field Dynamically

Set The Focus on a Particular Element in The Form

The code below shows how to set the focus on an element when the page is loaded.

<FORM name="myform" action="submit-form.php"> Name: <input type="text" name="Name"><br> Email: <input type="text" name="Email"><br> <input type="submit" name="Submit" value="Submit"> </FORM>
<SCRIPT language="JavaScript"> document.myform.Name.focus(); </SCRIPT>

See the code above in action:
Example of setting focus on an element in a Form

Using getElementById to get the elements in a form

See: How to use getElementById to get the elements in a form

Setting the value of a form element using JavaScript

Setting the value of form element using JavaScript (textarea and text field)

Setting the value of form element using JavaScript (hidden field)

Setting the value of form element using JavaScript (select,list,checkbox and radio button)

Getting the value of a form element using JavaScript

See: How to get the value of a form element using JavaScript

Using JavaScript to reset or clear a form

See: Using JavaScript to reset or clear a form

Access form objects when there are multiple forms

See: Accessing form objects when there are multiple forms




HTML Forms
	HTML Form Tutorial
	The Form Tag
	The Form Submit Button
	Form design software
	How to make a web form
	Make web forms quickly, without coding

Javascript Form Handling
Basics
	Using getElementById to get the elements in a form
	Set value of form element using JavaScript
	Get value of form element using JavaScript
	Handling multiple forms using JavaScript
	JavaScript reset/clear a form
Advanced
	JavaScript Form Validation
	Submitting a form using JavaScript
	Can JavaScript Email a Form?
	Switching the form action field dynamically
	JavaScript Button

JavaScript Popup Windows
	The window.open method
	The window.close method
	More ...



. Copyright © 2003-2009 JavaScript-coder.com. All rights reserved.