Form Events JQ Home  <<  JQ Advanced  <<  Form Events

In our final investigation of event handlers we look at the form event methods available with jQuery.

The jQuery form event methods in this suite allow us to bind event handlers to the blur, change, focus, select and submit JavaScript events.

Form Events Description
.blur()Bind an event handler to the blur JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.change()Bind an event handler to the change JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.focus()Bind two event handlers to the focus JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.focusinBind an event handler to The JavaScript focusin event, optionally passing a map of data or trigger that event on the specified element.
.focusoutBind an event handler to The JavaScript focusout event, optionally passing a map of data or trigger that event on the specified element.
.select()Bind an event handler to the select JavaScript event, optionally passing a map of data or trigger that event on the specified element.
.submit()Bind an event handler to the submit JavaScript event, optionally passing a map of data or trigger that event on the specified element.

Form Event Methods

The .blur() Method Top

Bind an event handler to The JavaScript blur event or trigger that event on the specified element, optionally passing a map of data.

  • The blur event is sent to an element when the element loses focus.

We use this methods .blur( ) signature in our example below which triggers The JavaScript blur event on the specified element.

The second signature .blur( handler(eventObject) ) binds an event handler to The JavaScript blur event.

The third signature .blur( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript blur event, optionally passing a map of data.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div3' every time the radio button for 'beef pie' loses focus.

When the radio button is pushed we trigger off the blur JavaScript event on the 'div3'. This then fires off the $('#div3').blur(function(){}) code which outputs the message.

Pie Survey

Which pie do you prefer?:

Select a pie shape: 


$(function(){
  $('#beef').blur(function () {
    $('#div3').append('<code>blur</code> JavaScript event triggered.<br>');
  });
  $('#beef').click(function() {
    $('#div3').blur();
  });
});

div3. Some initial text.

The .change() Method Top

Bind an event handler to The JavaScript change event or trigger that event on the specified element, optionally passing a map of data.

  • The change event is sent to an element when the element changes.

We use this methods .change( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript change event, optionally passing a map of data.

The second signature .change( ) triggers The JavaScript change event on the specified element.

The third signature .change( handler(eventObject) ) binds an event handler to The JavaScript change event.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'p' element with an id of 'scrollspan3' each time the input element with an id of 'input3' has some text changed and then loses focus.

When the input field gets changed, the change JavaScript event fires off the $('#input3').change({ param1: '#scrollspan3', param2: 'change ', 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: '#scrollspan3', param2: 'change ', 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(){
  $('#input3').change({ param1: '#scrollspan3', param2: 'change ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

We will show a message here.

The .focus() Method Top

Bind an event handler to The JavaScript focus event or trigger that event on the specified element, optionally passing a map of data.

  • The focus event is sent to an element when the element gains focus.

We use this methods .focus( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript focus event, optionally passing a map of data.

The second signature .focus( ) triggers The JavaScript focus event on the specified element.

The third signature .focus( handler(eventObject) ) binds an event handler to The JavaScript focus event.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the input element with an id of 'input1' below gains focus.

When the input field gets focus, the focus JavaScript event fires off the $('#input1').focus({ param1: '#scrollspan1', param2: 'focus', 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: '#scrollspan1', param2: 'focus', 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(){
  $('#input1').focus({ param1: '#scrollspan1', param2: 'focus ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

We will show a message here.

The .focusin() Property Top

Bind an event handler to the focusin JavaScript event, optionally passing a map of data.

We use this methods .focusin( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript focusin event, optionally passing a map of data.

The second signature .focusin( ) triggers The JavaScript focusin event on the specified element.

The third signature .focusin( handler(eventObject) ) binds an event handler to The JavaScript focusin event.

Examples of these signatures are available in the reference section.

We show a new message in the 'p' element with an id of 'scrollspan10' each time the input element with an id of 'input10' gains focus.

When the element gains focus the focusin JavaScript event fires off the $('#input10').focusin({ param1: '#scrollspan10', param2: 'focusin', 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: '#scrollspan10', param2: 'focusin', 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(){
  $('#input10').focusin({ param1: '#scrollspan1', param2: 'focusin ', 
                          param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

We will show a message here.

The .focusout() Property Top

Bind an event handler to the focusout JavaScript event, optionally passing a map of data.

We use this methods .focusout( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript focusout event, optionally passing a map of data.

The second signature .focusout( ) triggers The JavaScript focusout event on the specified element.

The third signature .focusout( handler(eventObject) ) binds an event handler to The JavaScript focusout event.

Examples of these signatures are available in the reference section.

We show a new message in the 'p' element with an id of 'scrollspan11' each time the input element with an id of 'input10' loses focus.

When the element loses focus, the focusout JavaScript event fires off the $('#input11').focusout({ param1: '#scrollspan11', param2: 'focusout', 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: '#scrollspan11', param2: 'focusout', 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(){
  $('#input11').focusout({ param1: '#scrollspan11', param2: 'focusout ', 
                          param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

We will show a message here.

The .select() Method Top

Bind an event handler to The JavaScript select event or trigger that event on the specified element, optionally passing a map of data.

  • The select event is sent to an element when the element is selected by the user.

We use this methods .select( ) signature in our example below which triggers The JavaScript select event on the specified element.

The second signature .select( handler(eventObject) ) binds an event handler to The JavaScript select event, optionally passing a map of data.

The third signature .select( [eventData ,] handler(eventObject) ) binds an event handler to The JavaScript select event.

Examples of these signatures are available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div7' has some text selected.

When some text from the input field is selected we trigger off the select JavaScript event on the 'div7'. This then fires off the $('#div7').select(function(){}) code which outputs the message.


$(function(){
  $('#div7').select(function () {
    $('#div7').append('<code>select</code> JavaScript event triggered.<br>');
  });
  $('#input4').click(function() {
    $('#div7').select();
  });
});

The .submit() Method Top

Bind an event handler to The JavaScript submit event or trigger that event on the specified element, optionally passing a map of data.

  • The focus event is sent to an element when the element gains focus.

We use this methods .submit( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript submit event, optionally passing a map of data.

The second signature .submit( ) triggers The JavaScript submit event on the specified element.

The third signature .submit(handler(eventObject) ) binds an event handler to The JavaScript submit event.

Examples of these signatures are available in the reference section.

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

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

What we are doing here is passing across the event object to the function addText3(event). The map we specify, in our case { param1: '#scrollspan5', param2: 'submit ', 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.

Which pie do you prefer?:

            


$(function(){
  $('.ourform2').submit({ param1: '#scrollspan5', param2: 'submit ', 
                         param3: '**JavaScript event triggered**  ' }, addText3);
    return false; // disable submit 
  });
  function addText3(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
    return false;
  }
});

We will show a message here.

Lesson 3 Complete

In this final lesson on event handlers we looked at the form event methods available with jQuery.

Related Tutorials

jQuery Advanced - Lesson 1: Browser & Loading Events
jQuery Advanced - Lesson 2: Keyboard & Mouse Events
jQuery Advanced - Lesson 4: Event Handler Attachments
jQuery Advanced - Lesson 5: The Event Object

Reference

Methods

Attributes and Properties - .css() method
Attributes and Properties - .html() method
Events - .click() method
Events - .blur() method
Events - .change() method
Events - .focus() method
Events - .focusin() method
Events - .focusout() method
Events - .select() method
Events - .submit() method

Event Object Property

Event Object - event.data property