Assign Resulted Value to Third TextBox Using jQuery

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?

Jai · Accepted Answer · 2013-03-07 06:22:15Z

1

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>

edited Mar 7, 2013 at 6:22

answered Mar 7, 2013 at 6:15

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan Kumar · Accepted Answer · 2013-03-07 07:08:49Z

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>

edited Mar 7, 2013 at 7:08

answered Mar 7, 2013 at 6:12

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

Rohan Kumar Over a year ago

Try blur in place of change event.

Sharun · Accepted Answer · 2013-03-07 06:16:04Z

0

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>

answered Mar 7, 2013 at 6:16

Sharun

3,0926 gold badges32 silver badges60 bronze badges

Collectives™ on Stack Overflow

Assign Resulted Value to Third TextBox Using jQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related