jQuery change event
In HTML form elements, when value of an element like textbox, dropdown, text area etc. is changed the change event occurs. jQuery provides change() method to perform action or attach an event handler to change event. Below is syntax and example of using change event of jQuery.
Syntax
$(selector).change(function)
e.g.
$(“txtbox”).change(function)
Where function is optional, to be executed as change event happens.
Note that change event only works with form’s elements. For text boxes/areas it occurs when focus is changed to other element after any change.
In case of select / dropdowns change event occurs when an option is selected.
Running example of text box change event
In below example as you enter some text into text box namely, Enter text, and then press Tab key from keyboard to move to next text field, change event will happen and change method will be used to display an alert.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtchange").change(function(){
alert ("change event occured with value: " + document.getElementById("txtchange").value);
});
});
</script>
</head>
<body>
<p>Enter some text in first field then either press Tab key or click somewhere else on page!</p>
<form id="changeform">
Enter text: <input id="txtchange" value="" type="text">
text field 2: <input id="txtchange2" type="text">
<input type="submit" value="submit now"/>
</form>
</body>
</html>
|
Example with select change
Leave A Comment?