value of a text box based on the value of other text box

Question

I have an issue where I am trying to build a system where people can see the realtime data like, if I put 500 grams of milk then people can see the value content of fat, sweets , solid in it and for that I have a test box of weight of milk and readonly textboxes for other things like fat, sweet, solids etc.

now I want to update the value of fat,sweet,solids on change of weight of milk

I have achieved it to some extent but the problem is the value keeps on multplying even on decreasing the value of milk .

I am adding the code here please check and any help/ suggestions is deeply appreciated.

HTML

   <td><input type="text" name="name" placeholder="Weight" class='smalltextbo onlynumbers' id="w<?=$thedetails_array['sno']?>" onkeyup="return updatevalues(this);" onkeypress="return isNumber(event);"; value='1'/></td>
                      <td><input type="text" name='fat' value="<?=$thedetails_array['fat']?>" id="fat<?=$thedetails_array['sno']?>" readonly></td>
                      <td><input type="text" name='sweet' value="<?=$thedetails_array['sweet']?>" id="sweet<?=$thedetails_array['sno']?>" readonly></td>
                      <td><input type="text" name='solid1' value="<?=$thedetails_array['solid1']?>" id="solid<?=$thedetails_array['sno']?>" readonly></td>

JAVASCRIPT

function updatevalues(vale){
            var mainid=$(vale).attr("id");
            var onlyidis=mainid.substr(1);
            var mainval=$('#w'+onlyidis).val();

            var varfatval=$('#fat'+onlyidis).val();
            $('#fat'+onlyidis).val(varfatval*mainval);

            var varfatval=$('#sweet'+onlyidis).val();
            $('#sweet'+onlyidis).val(varfatval*mainval);


}

I have a data of real solids, fat and sweet in 1 gram of milk then update it with the real weight of milk here ...

here is an image

still cant get any solution is there any one who can help me better please ??

Answer 1

Your mistake is that the value of solids will take into account their previous value and multiply it to the value you have.

This is clearly wrong:

        var varfatval=$('#fat'+onlyidis).val();
        $('#fat'+onlyidis).val(varfatval*mainval);

        var varfatval=$('#sweet'+onlyidis).val();
        $('#sweet'+onlyidis).val(varfatval*mainval);

since varfatval is the previous value and you multiply mainval with it, instead of multiplying it with the value you need. You should somehow initialize the values you will need, for example like this (use the correct values instead of 12 and 13, respectively):

<script type="text/javascript">
    var fat = 12;
    var sweet = 13;
</script>

and then use these values for your updates, like this:

function updatevalues(vale){
            var mainid=$(vale).attr("id");
            var onlyidis=mainid.substr(1);
            var mainval=$('#w'+onlyidis).val();

            $('#fat'+onlyidis).val(fat*mainval);

            $('#sweet'+onlyidis).val(sweet*mainval);


}

Answer 2

You have to empty those input before update that value..

function updatevalues(vale){
        var mainid=$(vale).attr("id");
        var onlyidis=mainid.substr(1);
        var mainval=$('#w'+onlyidis).val();

        var varfatval=$('#fat'+onlyidis).val();
        $('#fat'+onlyidis).val();
        $('#fat'+onlyidis).val(varfatval*mainval);

        var varfatval=$('#sweet'+onlyidis).val();
        $('#sweet'+onlyidis).val();
        $('#sweet'+onlyidis).val(varfatval*mainval); 
 }