You are here: Home » All Posts » Javascript Form Handling » How to Submit a Form Using JavaScript

How to Submit a Form Using JavaScript

in Javascript Form Handling

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

Simfatic Forms : customizable formsUse Simfatic Forms to visually design your HTML Forms.
Simfatic 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!

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

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

Be Sociable, Share!

{ 76 comments… read them below or add one }

oribi April 25, 2012 at 8:20 am

Remember that this only works if there’s no input field with name=submit. The submit method is bound to this if it exists. See this post for more detail…

Reply

udhaya April 18, 2012 at 11:09 am

will this form submission via javascript support document.onsubmit = myfunction; ????

Reply

gameloo.info March 28, 2012 at 11:03 am

You guy really save me big time!

Reply

mua sam vui March 28, 2012 at 8:07 am

i apply this but do not work ! don’t know why

Reply

pranoti March 16, 2012 at 8:41 am

thanks a lot…….

Reply

Selahattin March 15, 2012 at 5:54 pm

Hello,

I like to much your form validation code and I want to use it at my client site.

I copy all code from your example, everything is ok and it works.
But, when I integraded to my site, it doesn’t work.
Finally, I investigated that it doesn’t work together with mootools.1.2.
(mootools-1.2.1-core-yc.js and mootools-1.2-more.js )

If I remove mootools code , i t works perfectly.

But, I have to use mootools for a few application in my site.

I am not a javascript guy , so may be there is small trick to solve this conflict, but I couldn’t do it.

If you advise me something, it will be so apreciated.

Thanks at advance for your cooperation.

Regards

Reply

dee March 10, 2012 at 3:09 pm

nice!

Reply

depot pulsa March 2, 2012 at 8:59 am

thanks it is very helpful

Reply

aijaz February 27, 2012 at 12:24 pm

thanks alot

Reply

jai February 25, 2012 at 12:57 pm

thankss..,,,

Reply

elec J. February 23, 2012 at 8:26 am

Thanks for sharing this code and I was able to implement this with minor changes in http://eggig.com/ site. You save my time and thanks again for your effort.

Reply

rajesh January 28, 2012 at 1:52 pm

wow ur stuff is superv……..this page becums my fav page nw onwards…

Reply

Peter January 25, 2012 at 10:36 am

Thank’s alot! a very nice tutorial

Reply

creedo January 18, 2012 at 9:54 am

yo stuff is good!!!!! GOD BLESS

Reply

Marius December 17, 2011 at 6:01 pm

I you want to use strict doctype, use “id” instead of “name”: document.getElementById(‘formid’).submit();

Reply

Andy December 16, 2011 at 4:51 pm

Talk about long-winded! No need for a function. Just put “document.formname.submit()” in the onClick/href of the image/button?

Reply

seofem December 14, 2011 at 3:28 pm

Two hours full of Google and finally this page helps me! Thank you. :-)

Reply

Marc December 13, 2011 at 4:22 pm

In some instances you use id=”myform” and in others you use name=”myform”. My form didn’t work using id, only name.

Reply

eslam shaheen December 12, 2011 at 5:32 pm

thanks alot

Reply

Ihebus November 27, 2011 at 2:27 pm

thanks a lot, it have been very helpful!

Reply

Leave a Comment

Previous post:

Next post: