.submit() JQ Home  <<  Events  <<  .submit()

• <<    .select()
• .keydown()     >>

Submit event handler.

Description

The .submit() method is used to bind an event handler to The JavaScript submit event or trigger that event on the specified element.

• The submit event is sent to an element when the user is attempting to submit a form and can only be attached to form elements. Forms can be submitted by:
  1. Clicking a <button type=submit> element.
  2. Clicking a < input type=image> element.
  3. Clicking a <input type=submit> element.
  4. Pressing the 'Enter' key when certain form elements have focus. Dependant upon the browser, pressing the 'Enter' key may only submit the form if there is exactly one text field, or in other cases only if the form has a 'submit' button coded. Because of this do not rely on a particular behavior for this key, unless observing the .keypress() event for the 'Enter' key.

Syntax

Parameters

Return

A jQuery object.

.submit( ) Example  Events  <<  Top

Trigger the submit JavaScript event on the specified element.

• This signature is a shortcut for .trigger('submit').

In the example below we show a new message in the 'div' element with an id of 'div1' when the user clicks the 'submit' button of the form, presses the 'Enter' key or clicks anywhere in the input.

When the input is clicked on we trigger off the submit JavaScript event on the 'ourform' class. This then fires off the $('#div1').submit(function(){}) code which outputs the message. Clicking the 'submit' button of the form or pressing the 'Enter' key may also trigger the event, see the information about this in the description above.

$(function(){
  $('.ourform').submit(function () { 
    $('#div1').append('<code>submit</code> JavaScript event triggered<br>');
    return false; // disable submit 
  });
  $('#div1').click(function() {
    $('.ourform').submit();
  });
});

.submit( handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the submit JavaScript event.

• This signature is a shortcut for .on('submit', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the 'submit' button in the form below is clicked or an image is clicked or the form has focus and the 'Enter' key is pressed.

When the 'submit' button in the form below is clicked or an image is clicked or the form has focus and the 'Enter' key is pressed, the submit JavaScript event fires off the $('.ourform2').submit(addText2); code.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.

$(function(){
  $('.ourform2').submit(addText);
  function addText(event) {
    $('#scrollspan1').append('submit 1 **JavaScript event triggered**<br>');
    return false;
  }
});

We will show a message here.

.submit( [eventData ,] handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the submit JavaScript event, optionally passing an object of data.

• This signature is a shortcut for .on('submit', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan2' each time the 'submit' button in the form below is clicked or an image is clicked or the form has focus and the 'Enter' key is pressed.

When the 'submit' button in the form below is clicked or an image is clicked or the form has focus and the 'Enter' key is pressed, the submit JavaScript event fires off the $('.ourform3').submit({ param1: '#scrollspan2', param2: 'submit 2 ', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'submit 2 ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.

$(function(){
  $('.ourform3').submit({ param1: '#scrollspan2', param2: 'submit ', 
                         param3: '**JavaScript event triggered**<br>' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + event.data.param3);
    return false;
  }
});

We will show a message here.

Related Tutorials

jQuery Advanced Tutorials - Lesson 3 - Form Events

• <<    .select()
• .keydown()     >>