How to submit a form with JavaScript?

Product Support LT Browser
,
#1

How can I submit a form using JavaScript? I have a form with the ID theForm, which contains a 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 the button is clicked, the placeOrder() function is called. This function changes the innerHTML of the div to “processing …” (removing the submit button). While the code works to change the content, I’m unable to get the form to submit. I tried using document.theForm.submit(); within the placeOrder() function, but that doesn’t work. How can I use Javascript submit form?

#2

Hello All,

Thank you for reaching out with your question! It sounds like you’re looking for a way to submit a form using JavaScript. The method you’ve mentioned, form.submit(), is a great way to handle form submission programmatically.

Instead of calling document.theForm.submit() directly, you can enhance your code by first retrieving the form element using getElementById() and then invoking the submit method. Here’s a refined version of the code for your placeOrder() function:

javascript

function placeOrder() {
    document.getElementById("placeOrder").innerHTML = "Processing..."; // Display a message
    document.getElementById("theForm").submit(); // Submit the form
}

In this approach, we update the button or element’s inner HTML to show a “Processing…” message, indicating that the form submission is in progress, and then proceed with submitting the form using JavaScript.

This technique ensures that you’re submitting the form smoothly while providing feedback to the user during the process. Feel free to adjust the code based on your specific requirements!

I hope this helps! If you have any further questions, don’t hesitate to ask.

#3

Use event.preventDefault() to control form submission

If you want to ensure that the default behavior of the form submission does not interfere, you can use event.preventDefault() and then submit the form:

function placeOrder(event) {
event.preventDefault(); // Prevent the default form submission
document.getElementById("placeOrder").innerHTML = "processing ..."; // Change innerHTML
document.getElementById("theForm").submit(); // Submit the form
}
#4

Change button type to “button” and handle submission manually You can change the button type from submit to button, and then handle the submission in the placeOrder() function:

function placeOrder() {
document.getElementById("placeOrder").innerHTML = "processing ..."; // Change innerHTML
document.getElementById("theForm").submit(); // Submit the form
}