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

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.


Comments on this entry are closed.

  • Thanks a lot for this simple and very helpful guide….

  • Thanks for one’s marvelous posting! I quite enjoyed reading it, you’re a great author.I will make sure to bookmark your blog and will come back very soon. I want to encourage continue your great job, have a nice afternoon!
    My partner and I absolutely love your blog and find nearly all of your post’s to be what precisely I’m looking for. Does one offer guest writers to write content for you personally? I wouldn’t mind writing a post or elaborating on some of the subjects you write in relation to here. Again, awesome website!

  • Hi,

    Is there an example for the post? Where must I setup the email address,
    where I can receive the info from the visitor of the form.

    Thanks,

    Greet Bouke

    • did yu get respond to this mgs,, coz i need help on the same issuce plz help.

  • Hi i have a VB ASP Project. In one of the page there are 3 different htms. When i click a link in one of the HTM another htm is loaded with the values. What happens now is the the 3rd HTM has a text box. So when i click the link in the first HTM the value that was entered in the 3rd HTM is not retained.
    Now comes the most wierd part this does not happen in Developer box or in deployment machine but only in PROD. The only difference i cud notice was PROD had IIS6 and rest had IIS 5.1. Can some one help me in giving a direction to this problem? I am totally blindfolded in this issue?

  • Hi,
    Try this function:

    function formNav(command, action, key){
    document.FormsPage.Command.value = command;
    if(action != null){
    document.FormsPage.Action.value = action;
    }
    else { document.FormsPage.submit(); return false; }

    if(key != null){
    document.FormsPage.Key.value = key;
    }
    else { document.FormsPage.submit(); return false; }
    }

  • I’m using JSP and not HTML. I call a javascript upon click of submit. here it is:

    function formNav(command, action, key){
    document.FormsPage.Command.value = command;
    if(action != null){
    document.FormsPage.Action.value = action;
    }
    if(key != null){
    document.FormsPage.Key.value = key;
    }
    document.FormsPage.submit();
    }

    Suggestions how I can call the validators so they execute and submit the page only if one of the validators fails?

  • thanks

  • How can I have a form filled out and submitted, without using the default mail program? Is it a PHP or something?

  • Your blog is nice. Thanks for providing us this information.

  • thanks for idea!

  • Thanks anyway nice tutorial ….

    Reply

  • how can I create a form that submits to an email?

  • Thanks anyway nice tutorial ….

  • Hi there,

    When I try the javascript form “javascript:document.form.submit()” in internet explorer 9 on Windows 7, I get the following pop-up box:

    “Are you sure that you want to leave this page?
    Message from webpage:
    The changes you made will be lost if you navigate away from this page.”

    Any idea why this pops up? It still works perfectly…

  • How do you specify where the form data is submitted TO, when you click ‘submit’?

    In particular, if I’m offline and not running a local server, how can I specify where the data goes?

  • Hi,

    I have a form that i want to submit when some function returns “true”, so i’ve written this function in javascript:

    function whensubmitisclicked() {
    if (otherfunction(0) == true) {
    document.forms[“standruimte”].submit();
    } else {
    alert(“form can’t be submitted!”);
    }
    }

    I’ve added a button with the onClick function “whensubmitisclicked()” inside my form:

    Now, when i submit the form i am getting this error in IE:
    Error: This property or method is not supported by this object

    Whats wrong here?

    • problem solved! Thanks!

  • nice looks

  • Thank you for your example. Immediately decided to issue a challenge to submit.

  • Thanks for great tutorial!

  • hello am building a website but i have failed to implement a date picker in it. am using jsp and html.
    help