.submit()

jQuery

previous page next page

.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)
      Type: Function()
      A function to execute each time the event is triggered.

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

    • 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.

  • version added: 1.0.submit()

    • This method does not accept any arguments.

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:

1
2
3
4
5
6
7
 
                                

                                  

                                    
                                      <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:

1
2
3
4
 
                                

                                  

                                    $('#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:

1
2
3
 
                                

                                  

                                    $('#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
                                  

                                    

                                      
                                        <!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-latest.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>

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

1
2
3
 
                                  

                                    

                                      $("form").submit( function () {
                                    

                                  

                                  

                                    

                                        return this.some_flag_variable;
                                    

                                  

                                  

                                    

                                      } );

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

1
 
                                  

                                    

                                      $("form:first").submit();
 POWERED BYHERONOTE
previous page start next page