How to implement dependent input fields Jquery?

Question

I'm building a invoice system where item name and price retrieved from database . Price is dependent on item name .

Now i have to do this .

Price: <Input type="text" id="price" name="price" />
Qty : <Input type="text" id="qty" name="qty" />
Tax : <Input type="text" id="tax" name="tax" />
Discount : <Input type="text" id="disc" name="disc" />
Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

I want to autofill total input field without reloading with this following formula

<?Php 
$total = $price * $qty + $tax - $disc;
?>

Answer 1

need to assign class in your html, and some jquery script,

//Assign Amount class in your 4 html fields

    Price: <Input type="text" id="price" name="price" class="amount" />
    Qty : <Input type="text" id="qty" name="qty" class="amount"/>
    Tax : <Input type="text" id="tax" name="tax" class="amount"/>
    Discount : <Input type="text" id="disc" name="disc" class="amount"/>
    Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

    $( document ).ready(function() {
        $('input.amount').keyup(function(){   
        var price = $("#price").val();
        var qty = $("#qty").val();
        var tax = $("#tax").val();
        var disc = $("#disc").val();
        var total = $("#total").val();
        total = ((parseFloat(price) * parseFloat(qty) + parseFloat(tax) - parseFloat(disc);
        $("#total").val(parseFloat(total));
       });
    });

Answer 2

It should be as,

  $( document ).ready(function() {
    $('input.amount').keyup(function(){   
    var price = $("#price").val();
    var qty = $("#qty").val();
    var tax = $("#tax").val();
    var disc = $("#disc").val();
    var total = $("#total").val();
      var total = (parseFloat(price) * parseFloat(qty)) + (parseFloat(tax) - parseFloat(disc));
    $("#total").val(parseFloat(total));
   });
});