313

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?

Improve this question
5
  • 4
    I take it you have a <form> tag someplace on your page. Commented Mar 24, 2012 at 21:13
  • 2
    I don't see any <form> in the code. Commented Mar 24, 2012 at 21:13
  • 1
    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 Commented Mar 24, 2012 at 22:24
  • 6
    ...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. Commented Apr 17, 2014 at 12:09
  • 2
    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> Commented Feb 26, 2021 at 17:15

12 Answers 12

Reset to default
205

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This may seem super-obvious to some, but i had a button with the name and id "submit", and document.theForm.submit() reported an error. Once I renamed my button, the code worked perfectly.
@Jonathan What is the name of button you had? Coz, as per api.jquery.com/submit child elements of a form should not use input names or ids that conflict with properties of a form.
195

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);
Improve this answer

5 Comments

How do you tell it where to send the form? For example, in my case, I want the content emailed to me
@Imray You'll probably want server-side code to do that for you.
@CodyBugstein set action="/{controller}/{action-method}" method="post" attributes of the form you are trying to post.
as my form name is printoffersForm as well as id is same. document.getElementById('printoffersForm').submit(); but i gives me error submit is not an function
@MadhuriPatel Could be you have your submit button also named submit? See answer stackoverflow.com/questions/833032/…
61

It works perfectly in my case.

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

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

function formSubmit()
{
    document.getElementById("theForm").submit();
}
Improve this answer

5 Comments

will this submit form values from an input tag?
@roy Yes, it will submit form values from input tags.
@ChintanThummar and then you can handle the Form submit using document.getElementById("form1").onsubmit = function(){ //You can use Ajax Code here to submit the form // without refreshing page }
Please take into account that, in the OP's example, the form id is called theForm, something they have written on the very first line of their question, but that surprisingly was 'forgotten' (or ignored) by half the answers here, no matter how correct they are.
Thanks @GwynethLlewelyn to point it out. It's updated now.
27 
document.forms["name of your form"].submit();

or

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

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

Improve this answer

2 Comments

In order to get the first one to work I had to change it to document.forms.namedItem("FormName").submit();
Please take into account that the OP told us the form id — it's called theForm in their example — so you could perhaps change your answer to reflect that?
16

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

document.getElementById('FormID').submit();
Improve this answer

1 Comment

'theForm' is the actual form id, according to the OP. You may wish to change your line of code to reflect that.
15

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();
}
Improve this answer

2 Comments

I suggest adding type="button" in the HTML part. Otherwise the button will e.g. submit in a form.
1. Technically, I think you could just do <button type="submit" onClick="this.form.submit()">Place Order</button> and save a function call. 2. @KenJiiii I would have to look it up, but my guess is that, if this button is outside the form, it won't submit anything except via JavaScript. Nevertheless, your suggestion is appropriate — because someone might make a mistake, forget to close with </form>, and then there will be unexpected results. 3. I'm not quite sure if you can get this.form to work in all scenarios, especially on deeply-nested HTML5.
15 
<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>
Improve this answer

3 Comments

This answer might be helpful for some stackoverflow.com/a/54619085/7003760
@MayerSpitz I can't quite understand how that relates to this answer?...
It's another approach of form creation using razor, I found it very structured and greatly useful
6

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()
}
Improve this answer

3 Comments

This does not improve the quality of the answers that are already given.
It's the only answer that shows the form name in the actual html for the form definition. Also, it's simple and straightforward.
Hmm. I think that this would only work if this form is at the 'root' of the DOM (as in very simple & trivial pages with zero nesting levels). I could do some testing, but I believe it's pointless, there are better solutions than this one.
5

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();
Improve this answer

2 Comments

what about there are more forms with the same class name above?
@Jack1987 With this answer, only the first form would be submitted, all others would be silently ignored.
1

I know this is very old question but this might help some new developers There are multiple ways to get this form working but here is a simple tweak Here is the code

<form action="/" class="form" id="theForm">
            <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>
        </form>

<script>
function placeOrder(){ 
            let form = document.getElementById('theForm');
            let div = document.getElementById('placeOrder');
            let span = document.createElement('span');
            span.innerText = 'Processing...';
            document.querySelector('button.input_submit').style.visibility = 'hidden';
            div.appendChild(span);
        }
</script>
Improve this answer

1 Comment

I like your complete answer best; maybe you should delete the other one, which is not so carefully written? Thanks!
0

If you land here looking for the best way to submit a form using a button outside the form:

As of HTML5, just use the button's form attribute.

<button type="submit" form="my_form_id">Submit</button>

This method can submit forms in unique contexts (eg: Stripe's iframe based PaymentElement) that JS inline onClicks won't work with.

Submit form using a button outside the <form> tag

Improve this answer

Comments

-1

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>
Improve this answer

4 Comments

True you need to submit form but the link wont appear in my coding sorry but make a onclick or href=javascript: document.getElementById('alt_forum_login').submit()
The question is about javascript, there's no need for the php code at all
1. I have to strongly discourage anybody from using something like this: Sending your passwords in clear text to the browser is a HUGE security flaw. 2. This response doesn't relate to the question Your effort to provide help is appreciated! But please be more careful around security topics. It's tempting for many to copy solutions from stackoverflow without fully understanding them.
This is the worst possible security flaw ever. DO NOT USE THIS ANSWER. For the sake of @AgeofTalisman — "hiding" the form just hides it from the user, but not from the browser, and it's trivially simple to see the name & password. You're not really "hiding" anything there.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.