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 }

Camilo Andres Lopez Rojas January 5, 2014 at 12:45 am

Genial, me sirvió mucho, solucione el problema

Reply

topcityagents November 12, 2013 at 11:41 am

this is a great solution.
document.forms["myform"].submit();

Reply

s3curity.t3rror September 17, 2013 at 12:57 am
Ed Vallee May 2, 2013 at 3:45 pm

Historically, I have used the SUBMIT action=”filename.php” field to invoke a CAPTCHA pass-or-fail event, and respond to the form user.
Of course, in my case (reference example below), javascript form validation overrides the action tag on form submission.
My question is: Is the use of CAPTCHA even necessary if I’m using form validation? and, if so, what is the easiest way to go about implementing CAPTCHA and form validation?
//* My form submission example – passing the input variable “captcha_input” on form submission

*//

Reply

Rolo March 7, 2013 at 2:12 pm

En cualquier caso deberan cambiar document.myform.submit(); por document.getElementById(“myform”).submit(); para no tener problemas con Firefox o Chrom…

Saluros

rolo

Reply

Cory December 14, 2012 at 3:33 pm

Just thought I would let you know that you may want to change this sentence:

For example, if the name of your form is ‘myform’, the JavaScript code for the submit call is:

to say “if the id” of you form…

There is both a name and id attribute for most elements, and this may confuse some newcomers, apart from that, though, I know it should be obvious to almost everyone, since you gave an example. Thanks!

Reply

baseball bats December 14, 2012 at 1:32 pm

I seriously love your site.. Very nice colors & theme.
Did you build this web site yourself? Please
reply back as I’m wanting to create my own blog and want to know where you got this from or just what the theme is called. Thanks!

Reply

Yohanes May 14, 2012 at 5:25 pm

Thx a lot guys…
This will help me much…

Reply

Shawn May 7, 2012 at 8:28 pm

Is there any way to control the highlighted length of the field in question that you mention in your Showing the error messages next to the input element section of your JavaScript Form Validation Script: More features page? I like this feature to highlight the error in this way, but do not like that it goes all the way across the screen instead of just highlighting the failed validation field in question only.

Thanks for sharing this helped me a lot for a project :o)

Reply

Gaurav March 14, 2013 at 12:53 pm

make use of table and you can specifically give size for that Td tag i did the same way..

Reply

Pagecolumn May 1, 2012 at 6:22 am

How to make the page not to refresh after submit? Thanks!

Reply

Kapil January 6, 2014 at 3:54 pm

You can use ajax for this.

Reply

Leave a Comment

Previous post:

Next post: