How to Submit a Form Using JavaScript

Generally, a form is submitted when the user presses a submit button. However, sometimes, you may need to submit the form programmatically using JavaScript.

JavaScript provides the form object that contains the submit() method. Use the 'id' of the form to get the form object.

For example, if the name of your form is 'myform', the JavaScript code for the submit call is:
document.forms["myform"].submit();

But, how to identify a form? Give an id attribute in the form tag

		
<form id='myform' action='formmail.pl'>

Here is the code to submit a form when a hyperlink is clicked:

<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
<a href="javascript: submitform()">Search</a>
</form>
<script type="text/javascript">
function submitform()
{
  document.myform.submit();
}
</script>

Click the link below to see the code in action:
JavaScript Form Submit Example 1

Make forms with custom Submit Button.

Use Simfatic Forms to visually design your HTML Forms.

Conducting Form Validations

You can make your form validations very easy by using the Form Validator Script. (See JavaScript Form Validation : quick and easy! ).

The form validation script uses the onsubmit() event of the form to validate the input. The browser does not trigger the onsubmit event if you call the submit method programmatically. Therefore, if the form is using the form validator script, call the onsubmit method also to trigger the validation.

See the example below:

<!-- Include the validator script-->
<script src="/scripts/gen_validatorv2.js"  
type="text/javascript"></script>

<form id="myform" action="handle-data.php">
Search: <input type='text' name='query' />
<A href="javascript: submitform()">Search</A>
</form>

<!-- Add validations to the form-->
<script type="text/javascript">
var myformValidator = new Validator("myform");
myformValidator.addValidation("query","req",
        "Please enter the value for query");
</script>

<!-- The function that submits the form-->
<script type="text/javascript">
function submitform()
{
 if(document.myform.onsubmit())
 {//this check triggers the validations
    document.myform.submit();
 }
}
</script>

See the code in action!
JavaScript Form Submit Example 2 (with validations)

Using image for submitting the form

Instead of the default gray submit button, you may like to use an image. There are two ways to use an image instead of the button.

Method 1 : Use the 'Image' input type

Standard HTML provides an input type 'image'. You can use image input type to create a submit button.
See the code below:

<form name="myform" action="handle-data.pl">
Search: <input type='text' name='query' />
<input type="image" src="go.gif" />
</form>

JavaScript form submit example 3

Method 2 : Use JavaScript Form Submit

Just like in the example above, use JavaScript form submit() function to submit the form. The sample code below shows the same:

<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
<a href="javascript: submitform()">
<img src="go.gif" width="33" height="19" border="0" />
</a>
</form>
<script type="text/javascript">
function submitform()
{
    if(document.myform.onsubmit && 
    !document.myform.onsubmit())
    {
        return;
    }
 document.myform.submit();
}
</script>

Image input form submit example

Want to have multiple submit buttons in a form?

Quickly create feature-rich web forms

Using Simfatic Forms you can create feature-rich web forms.
The features include highly customizable submit/reset buttons. Download here.




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.