JQuery Change Event Example

The change event occurs when the value of the component changed by the user or application. This event is associated witho <input> elements, <textarea>boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus. Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

For text box/text area, it occurs when focus is changed to other element after any change. When you are using select/drop down, the change event occurs when an option is selected.

JQuery Change() Syntax

$(selector).change(function)

It has parameter called function which specifies a function to run when a change event occurs.

JQuery Change() Example

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Change Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
   <h2>JQuery Change Event Example</h2>
   <script type="text/javascript">
      $(document).ready(function() {
        $("#myval").change(function() {
          alert("Changed Value is : " + document.getElementById("myval").value);
         });
       });
</script>
<body>
   <form id="myform">
      Enter text : <input id="myval" type="text" value="">
                   <input type="submit" value="Submit">
   </form>
</body>
</html>

Try It On JSFIDDLE

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
We have used change() method which occurs when the element changes. The line $(“#myval”).change(function()) binds a function to change event.
document.getElementById() method accesses the element with specified value of the Id or Name attribute.Its going to access the element by using id #myval and displays the value using alert box. Here, #myval is id selector which is used in the input tag.
The form tag creates HTML form for user input with id name myform and contains input tag which is used within form element which allows user to enter the data.
When you enter the text in the text box each time, you will be getting changed value in alert box. It will access the element with specific id by using document.getElementById(“myval”) method where myval is id of the element which you want to access.

When you run the above example, you would get the following output:

Example Using Dropdown Menu

<!DOCTYPE html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Change Event Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("#dropdown_change").change(function(){
      alert("Selected value is : " + document.getElementById("dropdown_change").value);
     });
   });
</script>

<body>
<form id="myform">

   Select a value from the list:

   <select id="dropdown_change">

      <option value="Sunday">Sun</option>

      <option value="Monday">Mon</option>

      <option value="Tuesday">Tue</option>

      <option value="Wednesday">Wed</option>

      <option value="Thursday">Thu</option>

      <option value="Friday">Fri</option>

      <option value="Saturday">Sat</option>

</select>
</form>
</body>
</html>

Try It On JSFIDDLE

As shown in the above example, we have used change() event with drop down menu which will select element from the list.When we select a value from the list, change event occurs. As change event occurs, the change() method will display alert box with selected value from the drop down menu. Alert box will display the value of the selected item.

When you run the above example, you would get the following output:

Example Using TextArea

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Change Event Example</h2>
<script type="text/javascript">
     $(document).ready(function(){
        $("#mytextarea").change(function(){
            alert("text area changed");
          });
        });
</script>
<body>

 <textarea id="mytextarea" rows="4" cols="20">
</textarea>

</body>
</html>

Try It On JSFIDDLE

As shown in the above example, we have used change() method with textarea. The text area defines multi line input control. It can hold unlimited number of characters and text in the fixed width font. The size of text area can be specified by rows and columns attributes. While entering text in the text area, if we click outside the text area then alert box will display saying that “text area changed” and again if we enter the text and clicked outside then same message will display.

When you run the above example, you would get the following output: