Muestre el resultado multiplicado de dos campos de entrada en otro campo y también use el mismo código para cada otro campo presente en la página usando jquery

Estaba trabajando en jQuery y me encontré con un obstáculo. Lo que estoy tratando de hacer es que tengo tres campos de entrada (cantidad, precio, total), y cuando el usuario ingresa los valores en cantidad y precio, entonces su respuesta multiplicada se mostrará en la columna total. Hasta ahora tan bueno.

Pero luego agregué 2 entradas o filas más con el mismo nombre e identificación, y cuando ingrese los valores de la primera (cantidad, precio), el resultado se muestra en la salida de todos los campos. Ahora, sé por qué, porque he usado la salida de nombre en el script para mostrar el resultado, sé que puedo dar diferentes nombres a los campos y mi código funcionará, pero en eso tengo que escribir el script para cada fila. esperaba usar solo una función de script y aplicarla en cada fila.

¿Y también cómo mostrar la sum del total en total general?

Resumen : quiero que este código funcione como un sistema de facturación como en tiendas minoristas

     $(document).ready(function(){ $("#price").keyup(function(){ var a=$("input[name='qty']").val(); var b=$("input[name='price']").val(); var r=$("input[name='output']").val(a * b); }); });     
Qty Price Total
Grand Total:

Hemos utilizado el nombre del campo de entrada como una matriz como qty [], price [], y output [], luego iterar a través de cada elemento usando jquery en cada ciclo y obtener el valor basado en el índice.

Aquí está el código:

HTML:

 
Qty Price Total
Grand Total:

Javascript:

 $(document).ready(function() { $(".price").keyup(function() { var grandTotal = 0; $("input[name='qty[]']").each(function (index) { var qty = $("input[name='qty[]']").eq(index).val(); var price = $("input[name='price[]']").eq(index).val(); var output = parseInt(qty) * parseInt(price); if (!isNaN(output)) { $("input[name='output[]']").eq(index).val(output); grandTotal = parseInt(grandTotal) + parseInt(output); $('#gran').val(grandTotal); } }); }); }); 

Enlace de jsfiddle: http://jsfiddle.net/xtj1g7z3/11/

En primer lugar, el error más importante con su código es que tiene identificaciones duplicadas. Las identificaciones deben ser completamente únicas; uno por página Tiene la misma ID para las filas y la misma ID para las entradas. Si desea compartir la misma referencia sobre diferentes elementos, use una clase.

Entonces, comencemos reescribiendo el HTML:

                

Ahora, intentemos que jQuery funcione. Usted dijo que no sabía cómo utilizar matrices de entrada HTML, por lo que he evitado eso aquí.

 $(document).ready(function() { // if any of the qty or price inputs on the page change $(".qty, .price").change(function() { // find parent TR of the input being changed var $row = $(this).closest('tr'); var a = $row.find(".qty").val(); var b = $row.find(".price").val(); var r = $row.find(".output").val(a * b); }); }); 

Si desea actualizar el cuadro “total”, puede hacer algo como esto:

 // declare variable outside of loop var total = 0; // loop each table row with class .test $('.test').each(function() { var $row = $(this); var value = $row.find('.price').val() * $row.find('.qty').val(); total = total + value; }); $('#gran').val(total); 

Puedes agregar eso a la función que construí arriba o hacer que se ejecute un botón de actualización, depende de ti.

Estas son solo ideas que pueden ayudarlo. Desafortunadamente, no tengo tiempo para darle una solución que funcione completamente. Sin embargo, he hecho de esta respuesta una wiki comunitaria, así que espero que alguien pueda venir y mejorarla.

Buena suerte.

Escriba una función de Javascript para recorrer sus elementos de entrada y actualizar los elementos total y total. Llame a esa función en un evento adecuado, como desenfoque o cambio. Para tutoriales básicos de Javascript, busque sitios web básicos como w3schools o codeacademy. Para funciones como estas, no puedes pasar o lograr mucho sin adquirir las habilidades básicas de Javascript o jQuery.

Intenta algo como abajo, debería funcionar

HTML:

                

JS:

 $("input[name^='price']").keyup(function(){ evaluateTotal($(this).attr('class')) }); function evaluateTotal (value) { var a=$("input[name='qty"+value+"']").val(); var b=$("input[name='price"+value+"']").val(); var r=$("input[name='output"+value+"']").val(a * b); }