Question

我正在研究这个表格而且我一直在努力添加一个字段来增加小费。我想得到一个总计的字段来填充总数和小费的总和，以便客户可以看到他们将收取什么费用。我似乎无法让这个领域完成总计。我很乐意为此提供帮助。谢谢！

FORM

<form method="post" action="" id="payment-form">
  <div class="col-sm-12">
    <div class="container">
      <div class="row-fluid">
        <?php foreach ($products as $product) : ?>
        <div class="col-sm-6  container-cart">
          <div class="thumbnail">
            <?php if ($product->image_url): ?>
              <img class="img-responsive" src="<?=$product->image_url ?>" />
            <?php endif // image_url ?>
            <div class="caption">
              <div class="well">
                <h3 class="product-title"><?= $product->title ?></h3>
                <p class="product-description"><?= $product->description ?></p>
              </div>
              <div class="row-fluid">
                <div class="input-group input-group-sm scrow">
                  <p class="lead">
                    <span id="item-price">$<?= money_format('%i', $product->price) ?></span>
                    <input type="hidden" class="price-integer form-control" value="<?= money_format('%i', $product->price) ?>">
                  </p>
                </div>
                <div class="input-group input-group-sm scrow">
                  <span class="input-group-addon">Quantity</span>
                  <input type="text" name="products[<?=$product->id ?>]" id="quantity" class="quantity form-control" autocomplete="off" value="<?=$_POST['products['. $product->id . ']'] ?>">
                </div>
                <div class="input-group input-group-sm scrow">
                  <span class="input-group-addon">Delivery Date</span>
                  <input type="text" name="delivery" id="delivery" class="form-control date-picker" autocomplete="off" value="">
                </div>
                <div class="input-group input-group-sm scrow">
                  <span class="input-group-addon">$</span>
                  <input type="text" name="base-total" id="base-total" class="readonly base-total form-control" value="" readonly>
                  <span class="input-group-addon">.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <?php endforeach // products ?>
      </div>
    </div>
  </div>
  <div class="containter">
    <div class="row-fluid">
      <div class="col-sm-6 col-sm-offset-3">
        <span>Total :</span>
        <div class="input-group scrow">
          <span class="input-group-addon">$</span>
          <input type="text" name="total-cart" id="total-cart" class="readonly total-cart form-control" value="" disabled="disabled">
          <span class="input-group-addon">.00</span>
        </div>
        <span>Gratuity :</span>
        <div class="input-group scrow">
          <span class="input-group-addon">$</span>
          <input type="text" name="gratuity" id="gratuity" class="gratuity form-control" value="">
          <span class="input-group-addon">.00</span>
        </div>
        <span>Grand Total :</span>
        <div class="input-group scrow">
          <span class="input-group-addon">$</span>
          <input type="text" name="grand-total" id="grand-total" class="readonly grand-total form-control" value="" disabled="disabled">
          <span class="input-group-addon">.00</span>
        </div>
        <div class="input-group input-group-sm scrow">
          <button class="btn btn-default" type="submit">Submit Payment</button>
        </div>
      </div>
    </div>
  </div>
</form>

JAVASCRIPT

$('.quantity').on('keyup', function() {
  var sum = 0;
  $(".container-cart").each(function(i,o){
    total = parseInt($(o).find("#quantity").val(), 10) * parseInt($(o).find("input.price-integer").val(), 10);
    if(!isNaN(total) /*&& total.length!=0**/) {
      $(o).find("#base-total").val(total);
  sum += total;
}
 });
 $("#total-cart").val(sum);
});

$('#gratuity').on('keyup', function() {
  grandTotal = parseInt($(o).find('#gratuity').val(), 10) += parseInt($(o).find('#total-cart').val(), 10);
  $('$grand-total').val(grandTotal);
});

Answer 1

更改

$('$grand-total').val(grandTotal);

到

$('#grand-total').val(grandTotal);

Id selector 用作#id

另外，如果要添加值只使用+

，请删除+=

$('#gratuity').on('keyup', function() {
  grandTotal = parseInt($(o).find('#gratuity').val(), 10) + parseInt($(o).find('#total-cart').val(), 10);
  $('#grand-total').val(grandTotal);
});

Javascript添加小计和小费以获得总费用

1 个答案: