Need help on change event on both input boxes

i need help on this one....i want to trigger the alert() e.g some code to execute after the change event on both input boxes....here is my code..

    Millimeter: <input type="text" id="millimeter" class="filter"/>
    Inch: <input type="text" id="inch" class="filter"/>

<script type="text/javascript">
    $(document).ready(function(){

        $(".filter").ch开发者_运维百科ange(function(){
            var value = this.value;
            var id = this.id;
            var convert = "";

            switch(id)
            {
                case "millimeter":
                    convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
                    $("#inch").val(convert).change();
                    break;

                case "inch":
                    convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
                    $("#millimeter").val(convert).change();
                    break;

                default:
                    alert('no input has been changed');
            }

            alert(id+" triggered the change() event");
            //some code here....
        });
    });
</script>

what i want is to trigger the alert() 2 twice...the result would be look like this..."Millimeter triggered the change() event"...and then when the other input box changes its value...."Inch triggered the change() event"....vice versa...i'm new to javascript and jquery...any help would be much appreciated..

The problem with your code is that in the change event of the first textbox you are triggering the change event of the second and thus entering in an endless loop. You should only use the following:

$("#inch").val(convert);

and:

$("#millimeter").val(convert);

in order to set the value of the other field but do not trigger change again.

Running your script on jsFiddle got me a "Maximum call stack size exceeded" error. This is because you're calling your .change() function inside of itself. I removed it, and it works fine.

Fiddle: http://jsfiddle.net/EwdLs/

$(".filter").change(function() {
    var value = this.value;
    var id = this.id;
    var convert = "";

    switch (id) {
    case "millimeter":
        convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
        $("#inch").val(convert);
        break;

    case "inch":
        convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
        $("#millimeter").val(convert);
        break;

    default:
        alert('no input has been changed');
    }

    alert(id + " triggered the change() event");
    //some code here....
});

If you want each input's change to also trigger the other input's change, but don't want to get in an endless loop, try some variation on the following:

$(document).ready(function(){
   function applyChange(el, changeOther) {
      var value = el.value;
      var id = el.id;
      var convert,
          other = "";

      if (changeOther) {
         switch(id) {
             case "millimeter":
                convert = (value / 25.4).toFixed(2);
                other = "#inch";
             break;

             case "inch":
                convert = (value * 25.4).toFixed(2);
                other = "#millimeter";
                break;

             default:
                alert('no input has been changed');
                break;
         }

         if (other != "") {
            $(other).val(convert);
            applyChange($(other)[0], false);
         }
      }
      alert(id+" triggered the change() event");
      //some code here....
   }

   $(".filter").change(function(){
      applyChange(this, true);
   });
});

In case it's not obvious, I basically took your existing change handler and put it in a new function, applyChange, which has a parameter to tell it whether or not to recurse. The code as is is clunky, but it should give you the general idea of one way to do what you seem to be asking.

P.S. Be sure to add in some validation that what the user entered is really a number.