# .submit()

Categories: Events > Form Events | Forms

## .submit( handler(eventObject) ) Returns: jQuery

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

- #### version added: 1.0.submit( handler(eventObject) )

  handler(eventObject)A function to execute each time the event is triggered.

- #### version added: 1.4.3.submit( [eventData], handler(eventObject) )

  eventDataA map of data that will be passed to the event handler.

  handler(eventObject)A function to execute each time the event is triggered.

- #### version added: 1.0.submit()

This method is a shortcut for `.bind('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() {
      alert('Handler for .submit() called.');
      return false;
    });

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.

### Additional Notes:

- Forms and their child elements should not use input names or ids that conflict with properties of a form, such as `submit`, `length`, or `method`. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

### Examples:

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>

      p { margin:0; color:blue; }
      div,p { margin-left:10px; }
      span { color:red; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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() {
          if ($("input:first").val() == "correct") {
            $("span").text("Validated...").show();
            return true;
          }
          $("span").text("Not valid!").show().fadeOut(1000);
          return false;
        });
    </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();