How to Submit a Form Using JavaScript
In normal cases, 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 name 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.myform.submit();
But, how to name a form? Simple! Mention the name attribute in the form tag
<form name='myform' action='formmail.pl'>
Suppose you want to submit a form when the user clicks on a hyperlink. The
code below shows how to do it.
<form name="myform" action="handle-data.php">
Search: <input type='text' name='query'>
<A
href="javascript:
submitform()">Search</A>
</form>
<SCRIPT language="JavaScript">
function
submitform()
{
document.myform.submit();
}
</SCRIPT>
Click the link below to see the code in action:
JavaScript Form Submit Example 1
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:
<SCRIPT src="/scripts/gen_validatorv2.js"
language="JavaScript"></SCRIPT>
<form name="myform" action="handle-data.php">
Search: <input type='text'
name='query'>
<A href="javascript:
submitform()">Search</A>
</form>
<SCRIPT LANGUAGE="JavaScript">
var myformValidator = new
Validator("myform");
myformValidator.addValidation("query","req","Please
enter the value for query");
</SCRIPT>
<SCRIPT language="JavaScript">
function
submitform()
{
if(document.myform.onsubmit())
{
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 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 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 language="JavaScript1.2">
function
submitform()
{
if(document.myform.onsubmit())
{
document.myform.submit();
}
}
</SCRIPT>
Image input form submit example
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
Want to have multiple submit buttons in a form?
|
