submit()

jQuery submit event is sent to the element when the user attempts to submit a form.

This event is only attached to the <form> element. Forms can be submitted either by clicking on the submit button or by pressing the enter button on the keyboard when that certain form elements have focus. When the submit event occurs, the submit() method attaches a function with it to run.

Syntax:

snippet

$(selector).submit()

It triggers the submit event for selected elements.

snippet

$(selector).submit(function)

It adds a function to the submit event.

Parameters of jQuery submit() event

Parameter	Description
Function	It is an optional parameter. It is used to specify the function to run when the submit event is executed.

Example of jQuery submit() event

Let's take an example to demonstrate jQuery submit() event.

snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'rookienerd' to submit this form finally.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text">
    <input type="submit">
  </div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
  if ( $( "input:first" ).val() === "rookienerd" ) {
    $( "span" ).text( "Submitted Successfully." ).show();
    return;
  }
  $( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );
  event.preventDefault();
});
</script>
</body>
</html>

Output:

Type 'rookienerd' to submit this form finally.