0
289
Viewshow to get the total for each item based on the quantity in laravel application using javascript?
I'm new to Laravel, hence unable to achive the desired result. I'm trying to get the total of each item based on their quantities provided by the user, I'm only getting the total for the first item total when quantity given but not for all items. Any help would be appreciated!
this is the image of my ordersPage
below is HTML code:
<p>Quantity:
<input type="number" onchange="totalAmount()" class="item_quantity" id="item_quantity"
name="item_quantity">
</p>
<p>Item Price: AED - </p>
<p type="number" id="item_cost" name="item_cost" class="mb-15">
{{ $lnkditem->item_cost}}
</p>
<p>Total Amount: AED - <strong style="color: red"></strong>
<strong> <span style="color: red" id="total"></span></strong>
</p>
below is JS code:
function totalAmount(){
var quantity = Number(document.getElementById('item_quantity').value);
var itemCost = Number(document.getElementById('item_cost').innerHTML);
var total = quantity * itemCost;
document.getElementById('total').innerHTML = total;
console.log(quantity);
·
Santiago Trujillo
1 answers
Answer question0
That's because your using ID to set the total value. You should use classes to do that. Set the class of total span to 'total' Import jquery and do that in this way: First step : remove id's and just use class instead of id; Step 2:insert this part of code in the script part of your page:
$(document).on('change','.item_quantity',function(e){
var quantity = $(this)
var itemcost = quantity.parent().next().next():
var total = parseFloat(itemcost.html()) * quantity.val();
var total_element = itemcost.next().children('.total');
total_element.html(total);
});
·
Santiago Trujillo
Report
Answer question