使用jQuery将结果值分配给第三个TextBox

Question

i have three textboxes. I want to get the value from the first 2 textboxes, calculate the value and then assign the result to the 3rd textbox. To achieve this, i have done something like following in jquery;

<script type="text/javascript">
   $(document).ready(function myfunction() {
        $("#TxBx_MarksObtained").change(function () {
            //var value = $(this).val();
            var a = $("#TextBoxTotalMarks").val();
            var b = $("#TxBx_MarksObtained").val();
            var c = (b * 100 / a).toFixed(2);
            $("#TextBoxMarksInPercent").val(c);
        }); 
    });
</script>

Now, the problem is, when i focus on TextBoxTotalMarks and enter the value, and for TxBx_MarksObtained too, Everythings works great and the result is assign to TextBoxMarksInPercent .
However, when i change my focus to another textbox (somewhere else in form) and then come back and change the value of TextBoxTotalMarks and TxBx_MarksObtained . I dont see any changes in TextBoxMarksInPercent .
What i am getting wrong?
Why my value isn't updated after comming back from another textbox?

Answer 1

Try this:

<script type="text/javascript">
   $(document).ready(function () {
        $("#TxBx_MarksObtained, #TextBoxTotalMarks").change(function () {//for both text boxes
            //var value = $(this).val();
            var a = $("#TextBoxTotalMarks").val();
            var b = $("#TxBx_MarksObtained").val();
            var c = (b * 100 / a).toFixed(2);
            $("#TextBoxMarksInPercent").val(c);
        }); 
    });
</script>

Answer 2

You have a error in doc ready handler:

<script type="text/javascript">
   $(document).ready(function myfunction() {
   //-------------------------^^^^^^^^^^^-----this should not be here

try this way i would suggest you to use .blur() or .focus() or .key()events :

<script type="text/javascript">
  $(document).ready(function () {
    $("#TxBx_MarksObtained, #TxBx_MarksObtained").keyup(function () {
    // ------------------------------------------^^^^^^--keyup instead of change.
        var a = $("#TextBoxTotalMarks").val();
        var b = $("#TxBx_MarksObtained").val();
        var c = (b * 100 / a).toFixed(2);
        $("#TextBoxMarksInPercent").val(c);
    }); 
  });
</script> 

Answer 3

Try focusout() instead of change()

<script type="text/javascript">
     $( document ).ready( function ()
    {
        $("#TxBx_MarksObtained, #TextBoxTotalMarks").focusout(function () {//for both text boxes
            //var value = $(this).val();
            var a = $("#TextBoxTotalMarks").val();
            var b = $("#TxBx_MarksObtained").val();
            var c = (b * 100 / a).toFixed(2);
            $("#TextBoxMarksInPercent").val(c);
        }); 
    });
</script>