Soy nuevo en JavaScript y JQuery. Tengo un grupo de entrada de artículos con 3 parámetros que son precio, descuento y cantidad. Me gustaría resumirlo primero antes de enviarlo para ver cuánto es el total.
hasta ahora esto es lo que tengo:
<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>En mi mente, podría usar un ciclo como:
total = 0; for(i = 0; i < count(price); i++){ total += price[i] * qty[i] * dsc[i] / 100; }Además, ¿qué pasa si elimino un grupo, cambiará el índice de la matriz?
No sé qué resultado quieres exactamente. este código puede ayudarte. pruébalo y edita según tus necesidades.
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 para convertir objetos en una matriz de valores
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>