Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Change Event in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 158
    Comment on it

    Change Event:

    Change event triggers when value of an element changes. It works only for form fields (<input>,<textarea> and <select> elements).

    • In case of select menu,checkboxes, and radio buttons change event occurs when user makes selection using mouse.
    • For other elements  change event occurs when the field loses focus.

    Syntax:

    $(selector).change()  //it triggers change event for selected element
    $(selector).change(function) //attach a function to the change event(optional) 
    

    Example:

    <!DOCTYPE html>    
    <html lang="en">    
    <head>    
      <meta charset="utf-8">    
      <title>change demo</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>      
      <style>    
      div {    
        color: brown;
        margin-top:10px;
        font-weight:bold;
      }
      section{max-width:450px;margin:0 auto;border:1px solid grey;background:#5AB0A6;padding:40px;text-align:center;}
      </style>    
        
    </head>    
    <body>    
    
    <section class="container"> 
    <h2>Change Event Example</h2>
    <select id="option" name="actors" >    
      <option>Value #1</option>    
      <option selected="selected">Value #2</option>    
      <option>Value #3</option>    
      <option>Value #4</option>    
      <option>Value #5</option>    
      <option>Value #6</option>    
    </select>    
    <div id="content"></div>
    </section>   
     <script>    
    $( "select" ) .change(function () {    
    document.getElementById("content").innerHTML="Selected Value: "+document.getElementById("option").value;  
    });  
    </script>    
     </body>    
    </html> 

    In the above example when user will select an option then change event will trigger and it will show the selected value inside a div.

    You can check the output of above example here: https://jsfiddle.net/h4tcyz7g/1/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: