0

I am using this to calculate total. Here is the total script

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery1.7.2.js"></script>
</head>
<body>
  <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery("#quantity, #unit_price, #tax").on('change',function(event){
        var subtotal = jQuery("#quantity").val() * jQuery("#unit_price").val();
        var total = subtotal + (subtotal  * jQuery("#tax").val() / 100);
        jQuery("#total").val(total);
      });
    });
  </script>
  <table>
    <tr>
      <td>
        <label for="unitcost">Unitcost</label>
        <input type="text" id="unit_price" />
      </td>
     </tr>
     <tr>
      <td>
        <label for="quantity">Quantity</label>
        <input type="text" id="quantity" />
      </td>
    </tr>
    <tr>
      <td>
        <label for="tax">Tax</label>
        <input type="text" id="tax" />
      </td>
    </tr>
    <tr>
      <td>
        <label for="total">Total</label>
        <input type="text" id="total" />
      </td>
    </tr>
  </table>
</body>
</html>

But there is one problem. Every time I have to click the text field to get the result. I want that when user will enter the values in their fields it should show the total without click on input fields. I think jquery ajax will work here but don't know how to implement that in this. Any help and suggestions will be appreciable.

NewUser
  • 12,713
  • 39
  • 142
  • 236

2 Answers2

1

use the .keyup() it will show the total without click on input fields

jQuery("#quantity, #unit_price, #tax").keyup(function(event){

or 

jQuery("#quantity, #unit_price, #tax").on('keyup',function(event){
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
1

You can try using a different event than click, like keyup for example

Try this fiddle

So instead of jQuery("#quantity, #unit_price, #tax").on('click',function(event){

Use jQuery("#quantity, #unit_price, #tax").on('keyup',function(event){

Hazem Salama
  • 14,891
  • 5
  • 27
  • 31