How Can I Submit a Form Using Javascript?

Sophia Al-Mansoor
Sophia Al-Mansoor
• • 4 min read

I Have a Form with Id theForm Which Has the Following Div with a Submit Button Inside: Place Order When Clicked, the Function placeOrder() Is Called. the...

How Can I Submit a Form Using Javascript?

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?

5

10 Answers

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

2

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

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();
}
4 
document.forms["name of your form"].submit();

or

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

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

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

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

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

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

Must Read

HTML

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

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

Sophia Al-Mansoor

Global Business & E-Commerce Reporter
Linkedin Twitter

Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.