How to Submit HTML Form Using jQuery

We’ll learn about submitting the HTML form using jQuery in this post.

Submit the HTML Form Using jQuery

The .submit() method binds an event handler to the JavaScript submit an event or dispatches this event on an element. The submit event is sent to an item when the user attempts to submit a form.

Syntax:

.submit(handler)

The handler is a function called/executed each time the event is triggered, and it can only be attached to <form> elements.

Forms can be submitted by explicitly clicking or pressing <input type="image">, <button type="submit">, <input type="submit">, or by pressing Enter when specific form elements have focus. Like the .submit() method is just a shorthand for .on("submit", handler), a separation is possible using .off("submit").

Forms and their children cannot use similar input names or identifiers that conflict with the properties of a form, such as the submit method. Name conflicts can cause confusing failures.

You can find more information about the .submit() documentation for .submit().

Example:

Code - HTML:

<form id="myForm">
    <input type="text" value="Hello world">
    <input type="submit" value="Submit">
</form>

Code - JavaScript + jQuery:

$('#myForm').submit((event) => {
  console.log('.submit() called.');
  event.preventDefault();
});

Run the above code snippet in any browser that supports jQuery. Click the Submit button to display the message ".submit() called.".

Output:

Run Code

We can cancel the submit movement with the aid of calling .preventDefault() on the event object or with the aid of returning false from our handler. We can trigger the event manually while every other element is clicked.