JQuery Forms Change

From CoderLearner
Jump to: navigation, search

Description

$.change() triggers the "change" javascript event.

Example 1

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Change</title>
	<script 
		type="text/javascript" 
	        src="jquery.min.js">				 
	</script>
	<script>
	    $().ready(function() {
               $('select').change(function(){
                     alert('test 3');
                });
          
	    });
        </script>
</head>
<body>
  <select class="testch">
     <option value="option1" selected="selected">Option 1</option>
     <option value="option2">Option 2</option>
  </select>
   
</body>
</html>

Try It

Example 2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Change</title>
        <script 
            type="text/javascript" 
            src="jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $("select").change(function () {
                    var str = "";
                    $("select option:selected").each(function () {
                        str += $(this).text() + "- ";
                    });
                    $("span").text(str);
                })
                .change();
            });
        </script>
    </head>
    <body> 
        <form>
            <select name="car" multiple="multiple">
                <option>Honda Accord</option>
                <option selected="selected">Toyota Tercel</option>

                <option>Ford Egde</option>
                <option selected="selected">BMW</option>
                <option>Kia</option>
                <option>Lexus</option>

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

Try It

Example 3

Check for the change of the element and triggers event.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Change</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $().ready(function() {
                $('.testch1, .testch2').change(function(){
                    var v1=$('select.testch1 option:selected').text();
                    var v2=$('select.testch2 option:selected').text();
                    alert(v1+'--'+v2);

                });
            });
        </script>
    </head>
    <body>
        <select class="testch1">
            <option value="option1" selected="selected">Option 1</option>
            <option value="option2">Option 2</option>
        </select>
        <select class="testch2">
            <option value="option1" selected="selected">Option 1</option>
            <option value="option2">Option 2</option>
        </select>

    </body>
</html>

Try It

Example 4

Handle key and change events.

function doChange() {
   alert("Change test");
}

$("select").keypress(function (){
doChange();
});

$("select").change(function (){
doChange();
});

Try It

Example 5

Use $.on() function to trigger event. Use $.on() method can solve most of the browsers related issue that associated with $.change().

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Change</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('form#frm_my_room').on('click','#check_submit',function(){
                    alert("something");
                });
            });
        </script>
    </head>
    <body> 
        <form id="frm_my_room">
            <input type="text" name="name"/>
            <input type="submit" id="check_submit" value="Submit"/>
        </form>

    </body>
</html>

Try It