如何自动计算

Question

如何使用Codeigniter中的jquery或Javascript计算如下要求 我有3个输入元素在用户完成后计算它们形成元素：

1, Quantity
2, Unitprice
3, Total.

按总数=数量* unitprice。

<td><?php echo form_input('quantity','',' class="form-control"')?></td>
<td><?php echo form_input('unitprice','',' class="unit form-control" placeholder="unit pricee"')?></td>
<td><?php echo form_label('','total','class="form_control"')?></td>

我尝试写这样的javascript

<script type="text/javascript">
    $(document).ready(function () {
      $('.unitprice').keyup(function () {
         Calculate();
         });
    });

function Calculate() { 
             var quantity = document.getElementsByClassName("quantity").val();
             var unitprice = document.getElementsByClassName("unitprice").val();
             var total = quantity * unitprice;
              $('.total').val(total);
              } 
    </script>

但它不起作用

先谢谢!!!!

Answer 1

这是一个基本的例子，因为我很无聊。小提琴 - http://jsfiddle.net/sgnl/44ts8ucf/1/

HTML

<input type="text" id="quantity" class="calc_element"> Quantity
<input type="text" id="unit_price" class="calc_element"> Unit Price
<div id="total"></div>

的javascript

// get some IDs or classes on your elements to target them easily
var total = $('#total');

// bind an event that triggers on KEYUP
$('.calc_element').on('keyup', function(){
  // when triggered get the values from the input elements
  // via jQuery's '.val()' method
  var quantity = $('#quantity').val() || 1;
  var unit_price = $('#unit_price').val();

  var result = (quantity * unit_price) + " total";

  // set the innerHTML of the div to your calculated total
  total.html(result);
});

YMMV，这就是它的主旨，需要对你的代码进行一些调整。

Answer 2

试试这样：

$(function(){
$('.qty, .unit').on('blur', function(e){
  var qty = parseFloat( $('.qty').val() ), 
      unit = parseFloat( $('.unit').val() );

  if( isNaN(qty) || isNaN(unit) ) {
    $('.result').text('');
    return false;
  }

  var total = qty * unit;
  $('.result').text( total );
});
});

DEMO