Я заканчиваю проект, и внезапно поставлен в тупик. Я пытаюсь отобразить «Всего», только когда нажата «ПРОВЕРКА». В настоящее время он заполняется автоматически. Я искал в Интернете различные функции, которые делают именно это, но мне не повезло. Любое руководство приветствуется.
Псевдокод будет выглядеть примерно так: onClick () return Total
$(document).ready(function() {
$(document).on("input paste keyup", ".product_qty", function(event) {
var product_quantity = 0;
var product_price = 0;
var gst_amount = 0;
var sub_total = 0;
var total_qty = 0;
var grand_total = 0
product_quantity = $(this).val();
product_price = $(this).parent().prev().html();
sub_total = product_price * product_quantity;
$(this).parent().next().html(sub_total);
$('.product_qty').each(function(k, v) {
product_quantity = parseInt($(this).val()) ? parseInt($(this).val()) : 0;
product_price = parseFloat($(this).parent().prev().html()) ? parseFloat($(this).parent().prev().html()) : 0;
console.log(product_quantity);
console.log(product_price);
sub_total = parseFloat(product_price * product_quantity);
console.log(sub_total);
total_qty += product_quantity;
grand_total += sub_total;
});
if (grand_total > 0) {
gst_amount = (grand_total * 8) / 100;
}
$("#total_qty").html(total_qty);
$("#total_amount").html(grand_total);
grand_total += gst_amount;
$("#gst_amount").html(gst_amount);
$("#discount_amount").html(0);
$("#grand_total").html(grand_total);
});
//
$(document).on("click", ".delete", function(event) {
var cart_item = 0;
$(this).parent().parent().remove();
cart_item = $('.product_qty').length;
if (cart_item <= 0) {
$("#total_qty").html('0');
$("#total_amount").html('0');
$("#gst_amount").html('0');
$("#discount_amount").html(0);
$("#grand_total").html('0');
} else {
$('.product_qty').trigger('keyup');
}
});
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col class="con1" style="align: center; width: 30%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con0" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 20%" />
<col class="con1" style="align: center; width: 10%" />
</colgroup>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Mens T Shirt</td>
<td class="product_price">25</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td><a href="#" class="delete">x</a></td>
</tr>
<tr>
<td>Hat</td>
<td class="product_price">15</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td><a href="#" class="delete">x</a></td>
</tr>
<tr>
<td>Womens T Shirt</td>
<td class="product_price">20</td>
<td><input type="text" name="qty" class="product_qty" value="0"></td>
<td class="amount_sub_total"></td>
<td><a href="#" class="delete">x</a></td>
</tr>
<tr>
<td>Total</td>
<td> </td>
<td id="total_qty"></td>
<td id="total_amount"></td>
<td> </td>
</tr>
<tr>
<td>Tax (8%)</td>
<td> </td>
<td> </td>
<td id="gst_amount"></td>
<td> </td>
</tr>
<tr>
<td colspan="5" class="checkout"><a href="#">CHECKOUT</a></td>
</tr>
<tr>
<td>Total Payment</td>
<td> </td>
<td> </td>
<td id="grand_total"></td>
<td> </td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>