# .submit()

## submit ( handler(eventObject) ) Returns: jQuery version added: 1.0

- handler(eventObject)
  Type: Function
  A function to execute each time the event is triggered.

## submit ( eventData, handler(eventObject) ) Returns: jQuery version added: 1.4.3

- eventData
  Type: PlainObject
  An object containing data that will be passed to the event handler.

- handler(eventObject)
  Type: Function
  A function to execute each time the event is triggered.

## submit ( ) Returns: jQuery version added: 1.0

Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

This method is a shortcut for `.on( "submit", handler )` in the first variation, and `.trigger( "submit" )` in the third.

The `submit` event is sent to an element when the user is attempting to submit a form. It can only be attached to `<form>` elements. Forms can be submitted either by clicking an explicit `<input type="submit">`, `<input type="image">`, or `<button type="submit">`, or by pressing `Enter` when certain form elements have focus.

Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

For example, consider the HTML:

    <form id="target" action="destination.html">
      <input type="text" value="Hello there">
      <input type="submit" value="Go">
    </form>
    <div id="other">
      Trigger the handler
    </div>

The event handler can be bound to the form:

    $( "#target" ).submit(function( event ) {
      alert( "Handler for .submit() called." );
      event.preventDefault();
    });

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling `.preventDefault()` on the event object or by returning `false` from our handler. We can trigger the event manually when another element is clicked:

    $( "#other" ).click(function() {
      $( "#target" ).submit();
    });

After this code executes, clicks on `Trigger the handler` will also display the message. In addition, the default `submit` action on the form will be fired, so the form will be submitted.

The JavaScript `submit` event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the `submit` event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior.

## Examples:

#### Example: If you'd like to prevent forms from being submitted unless a flag variable is set, try:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      p {
        margin: 0;
        color: blue;
      }
      div,p {
        margin-left: 10px;
      }
      span {
        color: red;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <p>Type 'correct' to validate.</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() === "correct" ) {
        $( "span" ).text( "Validated..." ).show();
        return;
      }

      $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
      event.preventDefault();
    });

    </script>

    </body>
    </html>

#### Demo:

#### Example: If you'd like to prevent forms from being submitted unless a flag variable is set, try:

    $( "form" ).submit(function() {
      return this.some_flag_variable;
    });

#### Example: To trigger the submit event on the first form on the page, try:

    $( "form:first" ).submit();