Блог

Я работаю над этой формой и пытаюсь добавить поле для добавления чаевых. Я хотел создать поле с общей суммой для заполнения суммой общей суммы и чаевых вместе, чтобы клиенты могли видеть, сколько с них будет взиматься плата. Кажется, я не могу получить поле для вычисления общей суммы. Я был бы рад любой помощи в этом вопросе. Спасибо!

ФОРМА

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

lt;?= 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">

lt;/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">

lt;/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">

lt;/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">

lt;/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) /*amp;amp; 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);
});
 

Изменение

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

Для

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

Селектор идентификаторов используется как #id

Кроме того, удалите = в случае, если для добавления значений используйте только

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