You can manually submit forms through JavaScript using the **`submit()`** and **`requestSubmit()`** methods.

Submitting forms through JavaScript gives you more control. You can prevent default behaviors, validate the form, or process inputs in JavaScript before the form is sent to the server. 

# Syntax

- <code>*HTMLFormElement*.<b>submit()</b></code>

The **`submit()`** method does not accept any parameters and does not return anything.

> Note: Invoking `submit()` does *not* raise a `submit` event; the form's `onsubmit` handler is not run.

- <code>*HTMLFormElement*.<b>requestSubmit(*submitter*)</b></code>

  - **`submitter`**: (Optional) The submit button used to handle form submission. If not provided, the form element itself is used as submitter.

The **`requestSubmit()`** method is used when you want to activate the form's submit `<button>` or raise the form's `onsubmit` handler.


# Example  
  
Let's try submitting a form using an image.  

## Using `submit()`

Notice how the form's `onsubmit` handler is not called.

img {
  width: 50px;
  height: 50px;
}

<html>
  <head>
  </head>
  <body>
    <form id="myform" onsubmit="onSubmitHandler(event)">
      <input type="text" name="userText" placeholder="Enter text">
    </form>
    <p>Click below image to submit form:</p>
    <img onclick="handleSubmit()" src="https://www.educative.io/static/imgs/logos/MainLogoV2.png">
   </body>
</html>

const form = document.getElementById("myform");

function handleSubmit() {
  console.log("Entered text: ", form["userText"].value);
  
  form.submit();  // submits the form
  
  window.stop();  // prevents page from reloading on submit() call
  console.log("Form submitted.");
}

// This function is not called when submitting through submit()
function onSubmitHandler(event) {
  console.log("onsubmit handler called.");
}

codemirror

console

## Using `requestSubmit()`

The form's `onsubmit` handler is called. Here we use it to prevent page reload on form submission.

const form = document.getElementById("myform");

function handleSubmit() {
  console.log("Entered text: ", form["userText"].value);
  
  form.requestSubmit();  // submits the form
  
  console.log("Form submitted.");
}

// This function is called when submitting
function onSubmitHandler(event) {
  event.preventDefault(); // prevents page reload
  console.log("onsubmit handler called.");
}

For more details on both methods, you can check out the official docs [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit) and [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit).

What are submit forms in JavaScript?

You can manually submit forms through JavaScript using the submit() and requestSubmit() methods. 

What are submit forms in JavaScript?

Syntax

Example

Using submit()

Using requestSubmit()

Using `submit()`

Using `requestSubmit()`