Summing up Input Groups using JQuery-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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>