Form EventsS2C Home « 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.
.change()Bind an event handler to the change JavaScript event, optionally passing a map of data.
.focus()Bind two event handlers to the focus JavaScript event, optionally passing a map of data.
.select()Bind an event handler to the select JavaScript event, optionally passing a map of data.
.submit()Bind an event handler to the submit JavaScript event, optionally passing a map of data.

Form Event Methods

Bind event handlers to the blur, change, focus, select and submit JavaScript events.

The .blur() Methodgo to top of page 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( [eventData], handler(eventObject) ) binds an event handler to the JavaScript blur event.

An example of this signature is 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 go to top of page 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.

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

An example of this signature is 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() Methodgo to top of page 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.

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

An example of this signature is 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 .select() Method go to top of page 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( [eventData], handler(eventObject) ) binds an event handler to the JavaScript select event.

An example of this signature is available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div7' when the user clicks anywhere in the input.

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


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


The .submit() Method go to top of page 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.

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

An example of this signature is 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: Loading & Browser Events
jQuery Advanced - Lesson 2: Keyboard & Mouse Events
jQuery Advanced - Lesson 4: Event Handler Attachments
jQuery Advanced - Lesson 5: The Event Object

What's Next?

In the next lesson we look at the powerful jQuery event handler attachments.

go to home page Homepage go to top of page Top