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?

Syntax

Example

Using submit()

Using requestSubmit()

Using `submit()`

Using `requestSubmit()`