jQuery | change() with Examples
The change() is an inbuilt method in jQuery that is used to detect the change in value of input fields. This method works only on the “<input>, <textarea> and <select>” elements.
Syntax :
$(selector).change(function)
Parameter: It accepts an optional parameter “function”.
Return Value: It returns the element with the modification.
jQuery code to show the working of change() method:
Code #1:
In the below code, no function is passed to the change method.
< html > < head > jquery/3.3.1/jquery.min.js"></ script > <!--Demo of change method without passing function--> < script > $(document).ready(function() { $("button").click(function() { $("input").change(); }); }); </ script > </ head > < body > < p >Click the button to see the changed value !!!</ p > <!--click on this button and see the change --> < button >Click Me!</ button > < p >Enter value: < input value = "Donald" onchange = "alert(this.value)" type = "text" ></ p > </ body > </ html > |
Output:
Before clicking the “Click Me” button-
After clicking the “Click Me” button-
Code #2:
In the below code, function is passed to the change method.
< html > < head > jquery/3.3.1/jquery.min.js"></ script > <!--Here function is passed to the change method--> < script > $(document).ready(function() { $(".field").change(function() { $(this).css("background-color", "#7FFF00"); }); }); </ script > < style > .field { padding: 5px; } </ style > </ head > < body > <!--write something and click outside --> Enter Value: < input class = "field" type = "text" > < p >Write something in the input field, and then press enter or click outside the field.</ p > </ body > </ html > |
Output:
Before entering any values to the “Enter Value:” box-
After entering a values of “GeeksforGeeks” to the “Enter Value:” box and clicking outside of the box-
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.