在jquery ajax中显示总计而不单击文本字段

时间:2012-09-16 16:57:45

标签: jquery jquery-calculation

我将此用于calculate total。这是总脚本

<!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>

但有一个问题。 Every time我必须click the text field才能获得result。当用户enter the values in their fields it should show the total without click on input fields时,我希望这样。我认为jquery ajax将在这里工作,但不知道如何在此实现。任何帮助和建议都会很明显。

2 个答案:

答案 0 :(得分:1)

使用.keyup()它将显示总数而不点击输入字段

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

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

答案 1 :(得分:1)

您可以尝试使用与点击不同的事件,例如keyup,例如

尝试this fiddle

而不是jQuery("#quantity, #unit_price, #tax").on('click',function(event){

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