.change()S2C Home « Events « .change()

Change event handler.

Description

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

  • The change event is sent to an element when the element changes.
  • This event is limited to <input>, <select> and <textarea> elements.
    1. For select boxes, checkboxes, and radio buttons the event fires as soon as the user makes a selection with the mouse.
    2. For other input elements and textarea elements the event fires after the user makes a change and loses focus on the element.

Syntax


Signature Description
.change( )Trigger the change JavaScript event on the specified element.
.change( [eventData], handler(eventObject) )Bind an event handler to the change JavaScript event, optionally passing an object of data.

Parameters


Parameter Description Type
eventDataAn object of data to pass to the event handler.Object
handler( eventObject )A function to execute each time the event is triggered.Function

Return

A jQuery object.

.change( ) Examplego to top of page Top

Trigger the change JavaScript event on the specified element.

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

In the example below we show a new message in the 'div' element with an id of 'div5' every time a radio button is changed.

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

Pie Survey

Which pie do you prefer?:

Select a pie shape: 



$(function(){
  $('#div5').change(function () {
    $('#div5').append('<code>change</code> JavaScript event triggered.<br />');
  });
  $('.formfields3 input:radio').click(function() {
    $('#div5').change();
  });
});

div5. Some initial text.



.change( [eventData], handler(eventObject) ) Examplego to top of page Top


  • This signature is a shortcut for .bind('change', handler).

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

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.

go to home page Homepage go to top of page Top