I'm new in JavaScript and JQuery I have some input group of Items with 3 parameters which are Price, Discount, and Quantity. I'd like to sum it up first before submitting it to see how much the total is.
so far here's what I got:
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()"></button>
In my mind I could use a loop such as :
total = 0;
for(i = 0; i < count(price); i++){
total += price[i] * qty[i] * dsc[i] / 100;
}
also, what if I delete a group, will the array index changes?
I don't know what exactly result you want. this code may help you . try it and edit as per your requirement.
function Total()
{
let total=0;
for(i=0;i<$("input[id=price]").length;i++)
{
let p=$("input[id=price]")[i].value;
let q=$("input[id=qty]")[i].value;
let d=$("input[id=dsc]")[i].value;
total+=(p*q)-d;
}
$("#total").val(total);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<button type="button" onClick="Total()">Total</button>
<input type="number" id="total" placeholder="total">Use jQuery.map to convert Objects to array of values
function Total() {
let total = 0;
//Convert to array of values
let price = $("input[name='price[]']").map((i, el) => $(el).val());
let qty = $("input[name='qty[]']").map((i, el) => $(el).val());
let dsc = $("input[name='dsc[]']").map((i, el) => $(el).val());
//I prefer each over for
$.each(price, (i, element) => {
total += price[i] * qty[i] * dsc[i] / 100;
//if 'dsc' is discount in % may be the formula is different:
//example : price = 100 quantity = 1;dsc = 20; => grossRowTotal = 100 * 1 = 100; total = 100 - (100*20/100) = 100 - 20 = 80;
//let grossRowTotal = price[i] * qty[i];
//total += grossRowTotal - (grossRowTotal * dsc[i]/ 100);
});
console.log(total);
$("#result").html(total);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()">Total</button>
<div id="result"></div>