Tengo un sitio web en el que tengo un formulario, donde hay campos de entrada como a continuación. Como puede ver, estoy tratando de agregar dos cuadros de entrada para obtener los valores del tercero, sin embargo, esto funciona solo con el primer conjunto de cuadros de entrada, para el resto, viene defectuoso o los valores del primer conjunto. ¿Cómo puedo arreglar esto?
$(document).ready(function() { $(".value2").keyup(function() { var val1 = +$(".value1").val(); var val2 = +$(".value2").val(); $(".result").val(val1 * val2); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result">El problema se debe a que cuando llama a val() , entre otros métodos de jQuery, en un objeto jQuery que contiene una colección de elementos, solo se evalúa contra el primer elemento de esa colección.
Para solucionar su problema, puede usar los métodos transversales DOM de jQuery para recuperar los elementos relacionados en el DOM con el que provocó el evento. En este caso, prev() y next() :
jQuery($ => { $(".value2").on('input', e => { let $val2 = $(e.target); let val1 = +$val2.prev(".value1").val() || 0; let val2 = +$val2.val() || 0; $val2.next(".result").val(val1 * val2); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> Tenga en cuenta en el ejemplo anterior el uso de la input sobre la keypress de tecla para que la lógica también funcione cuando el usuario agrega contenido a la input con el mouse. También tenga en cuenta el uso de || 0 para forzar un valor de NaN a 0 .
Envuelva en contenedores y delegue desde el div principal del elemento que actualiza
Los datos aquí son relativos al campo que actualiza
NOTA: agregue un contenedor principal con una identificación y envuelva cada conjunto en divs también
$(document).ready(function() { $("#container").on("input",".form-control", function() { const $parent = $(this).closest("div.item") var val1 = +$(".value1", $parent).val(); var val2 = +$(".value2", $parent).val(); $(".result", $parent).val(val1 * val2); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="container"> <div class="item"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> </div> <div class="item"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> </div> <div class="item"> <input name="quantity[]" type="text" class="form-control value1"> <input name="rate[]" type="text" class="form-control value2"> <input name="amount[]" type="text" class="form-control result"> </div> </div>