How can I submit a form using JavaScript?

Question

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?

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
tag as you have in your code . You might use http://jsfiddle.net — sakhunzai, Mar 24 '12 at 22:24
...if you have an submit button (somewhere down with name=submit )... This solved my problem! It was — Nikolay Ivanov, Apr 17 '14 at 12:09
`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: `
(content)
` — Unterbelichtet, Feb 26 '21 at 17:15

score 187 · Accepted Answer · answered Mar 24 '12 at 21:12

187

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

answered Mar 24 '12 at 21:12

Andrew Hare

344,730
71
640
635

23

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 Oct 09 '17 at 04:20
1

@Jonathan What is the name of button you had? Coz, as per https://api.jquery.com/submit/ child elements of a form should not use input names or ids that conflict with properties of a form. – keya Sep 13 '18 at 14:53

score 176 · Answer 2 · answered Mar 24 '12 at 21:12

176

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);

answered Mar 24 '12 at 21:12

alex

479,566
201
878
984

How do you tell it where to send the form? For example, in my case, I want the content emailed to me – CodyBugstein Jul 18 '14 at 11:25
@Imray You'll probably want server-side code to do that for you. – alex Jul 21 '14 at 00:19
@CodyBugstein set `action="/{controller}/{action-method}" method="post"` attributes of the form you are trying to post. – phougatv Feb 27 '17 at 12:29
4

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 – Madhuri Patel Nov 19 '18 at 07:14
1

@MadhuriPatel Could be you have your submit button also named submit? See answer https://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript – rbassett Nov 27 '18 at 17:46

score 54 · Answer 3 · edited Jul 30 '20 at 22:09

54

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

edited Jul 30 '20 at 22:09

Peter Mortensen

30,738
21
105
131

answered Mar 29 '13 at 12:17

Chintan Thummar

1,462
19
32

will this submit form values from an `input` tag? – simanacci Jun 03 '16 at 08:26
@roy Yes, it will submit form values from input tags. – Chintan Thummar Jun 07 '16 at 12:20
2

@ChintanThummar and then you can handle the [Form submit](http://mycodingtricks.com/javascript/submit-form-using-javascript-ajax/) using document.getElementById("form1").onsubmit = function(){ //You can use Ajax Code here to submit the form // without refreshing page } – Shubham Kumar Jun 27 '16 at 22:47
I haven't try that but it look batter than what i had provided. Thanks ;) – Chintan Thummar Jun 28 '16 at 05:18

score 26 · Answer 4 · edited Jul 30 '20 at 22:13

26

document.forms["name of your form"].submit();

or

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

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

edited Jul 30 '20 at 22:13

Peter Mortensen

30,738
21
105
131

answered May 28 '14 at 05:16

Aruna

261
3
2

In order to get the first one to work I had to change it to document.forms.namedItem("FormName").submit(); – zsalya Jul 29 '22 at 21:58

score 14 · Answer 5 · edited Jul 30 '20 at 22:19

14

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

edited Jul 30 '20 at 22:19

Peter Mortensen

30,738
21
105
131

answered Apr 18 '17 at 08:11

SkyClasher

171
2
11

score 14 · Answer 6 · edited Jul 30 '20 at 22:22

14

<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>

edited Jul 30 '20 at 22:22

Peter Mortensen

30,738
21
105
131

answered Mar 29 '18 at 08:25

Jay Nagar

161
1
2

1

This answer might be helpful for some https://stackoverflow.com/a/54619085/7003760 – Mayer Spitz Feb 10 '19 at 17:34

score 13 · Answer 7 · edited Jul 30 '20 at 22:20

13

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

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

edited Jul 30 '20 at 22:20

Peter Mortensen

30,738
21
105
131

answered Jan 30 '18 at 14:09

Abhijeet Navgire

683
7
20

score 6 · Answer 8 · edited Nov 19 '19 at 15:34

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()
}

edited Nov 19 '19 at 15:34

Gust van de Wal

5,211
1
24
48

answered Aug 05 '16 at 06:09

Chandan Gupta

69
1
5

5

Please add some explanation to your answer. – Sampada Aug 05 '16 at 06:15
This does not improve the quality of the answers that are already given. – Randy Aug 05 '16 at 07:30
It's the only answer that shows the form name in the actual html for the form definition. Also, it's simple and straightforward. – Tim Bird Jul 09 '20 at 19:11

score 4 · Answer 9 · edited Jul 30 '20 at 22:13

4

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();

edited Jul 30 '20 at 22:13

Peter Mortensen

30,738
21
105
131

answered Jan 07 '15 at 17:11

Bimal Jha

391
2
14

what about there are more forms with the same class name above? – Jack1987 Sep 29 '16 at 19:38

score 1 · Answer 10 · edited Jul 30 '20 at 22:17

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>

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() — AgeofTalisman, Feb 02 '16 at 20:42
The question is about javascript, there's no need for the php code at all — Shedokan, Jul 07 '16 at 11:16
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. — Alexander Thiel, Dec 14 '20 at 10:39

score 0 · Answer 11 · answered Aug 27 '23 at 09:41

let form = document.getElementById('theForm');
let div = document.getElementById('placeOrder');
let span = document.createElement('span');
form.addEventListener('submit', function(e){
    e.preventDefault(); 
    div.style.display = 'none';
    span.innerText = 'processing...';
    form.appendChild(span);

    console.log('form is submitted.');
})

This is how you should approach this issue This answer is for new developers who kind of face this kind of issue.

jtubre · Answer 12 · 2023-03-02T21:13:11.707

-1

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

edited Mar 02 '23 at 21:13

answered Mar 02 '23 at 21:06

jtubre

669
1
8
13

How can I submit a form using JavaScript?

12 Answers12

HTML

JavaScript

HTML

JavaScript

PHP form to print

PHP and link to submit form

Linked

Related