Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss jQuery change event.
change event is fired when an element value changes. All the following elements fire this event
1. input
2. textarea
3. select
select, radio buttons and checkboxes fire the change event as soon as a selection is made, where as the other element types wait until they loose focus.
For the HTML used in the demo, please refer to my blog using the link below
As soon as the selection in the dropdownlist changes, we want to handle the change event and display the selected value in the div element with id=”divResult”. In the example below, we are using the id selector, so only the select element change event is handled.
$(document).ready(function () {
$(‘#ddlCity’).change(function () {
var selectedValue = $(this).val();
if (selectedValue == “Select”)
selectedValue = “Please select city”;
$(‘#divResult’).html(selectedValue);
});
});
The following code handles the change event of all the input elements (textbox, radio button, checkbox). Notice that in this example we are using the jquery element selector. Change event of select and textarea is not handled.
$(document).ready(function () {
var result = ”;
$(‘input’).change(function () {
if (result == ”) {
result += $(this).val();
}
else {
result += ‘, ‘ + $(this).val();
}
$(‘#divResult’).html(result);
});
});
The following code handles the change event of all the elements on the page. Notice that in this example we are using the jquery class selector.
$(document).ready(function () {
var result = ”;
$(‘.inputRequired’).change(function () {
if (result == ”) {
result += $(this).val();
}
else {
result += ‘, ‘ + $(this).val();
}
$(‘#divResult’).html(result);
});
});
