How can I submit a form using JavaScript?

220
votes

I have a form with id theForm which has the following div with a submit button inside:

<div id="placeOrder"
     style="text-align: right; width: 100%; background-color: white;">
    <button type="submit"
            class='input_submit'
            style="margin-right: 15px;"
            onClick="placeOrder()">Place Order
    </button>
</div>

When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).

The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:

document.theForm.submit();

But that doesn't work.

How can I get the form to submit?

10
javascript
I take it you have a <form> tag someplace on your page. - Justin808
I don't see any <form> in the code. - dotoree
what do you mean by : The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone). and would you mind to share that logic . By the way if you have an submit button (somewhere down with name=submit ) , the theform.submit() function will not work . Please clarify you question by adding <form> tag as you have in your code . You might use jsfiddle.net - sakhunzai
...if you have an submit button (somewhere down with name=submit )... This solved my problem! It was <input type="button" name="submit" ..., but still blocking the javascript from sending the form. - Nikolay Ivanov
document.theForm.submit(); doesn't work, you'd rather need to use document.getElementById("theForm").submit(); and specify the form id in HTML, for example: <form id="theForm">(content)</form> - Frederik Brammer

10 Answers

158
votes

Set the name attribute of your form to "theForm" and your code will work.

124
votes

You can use...

document.getElementById('theForm').submit();

...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.

var form = document.getElementById('theForm');

form.style.display = 'none';

var processing = document.createElement('span');

processing.appendChild(document.createTextNode('processing ...'));

form.parentNode.insertBefore(processing, form);
43
votes

It works perfectly in my case.

document.getElementById("form1").submit();

Also, you can use it in a function as below:

function formSubmit()
{
    document.getElementById("form1").submit();
}
19
votes
document.forms["name of your form"].submit();

or

document.getElementById("form id").submit();

You can try any of this...this will definitely work...

9
votes

I will leave the way I do to submit the form without using the name tag inside the form:

HTML

<button type="submit" onClick="placeOrder(this.form)">Place Order</button>

JavaScript

function placeOrder(form){
    form.submit();
}
4
votes

HTML

<!-- change id attribute to name  -->

<form method="post" action="yourUrl" name="theForm">
    <button onclick="placeOrder()">Place Order</button>
</form>

JavaScript

function placeOrder () {
    document.theForm.submit()
}
4
votes

If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:

document.getElementsByClassName("theForm")[0].submit();
4
votes

You can use the below code to submit the form using JavaScript:

document.getElementById('FormID').submit();
4
votes
<html>

    <body>

        <p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>

        <form id="myForm" action="/action_page.php">
          First name: <input type="text" name="fname"><br>
          Last name: <input type="text" name="lname"><br><br>
          <input type="button" onclick="myFunction()" value="Submit form">
        </form>

        <script>
            function myFunction() {
                document.getElementById("myForm").submit();
            }
        </script>

    </body>
</html>
0
votes

I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.

<input type="checkbox" name="autologin" id="autologin" />

As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...

Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.

First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.

PHP form to print

$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
    <input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
    <input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';

PHP and link to submit form

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>