1

Tengo un código sencillo, con el que planteo realizar una operación y al funcionar colocárselo a un cogido mas grande necesito sumar el total de mi multiplicación y colocarlo en un input en tiempo real.

Como Funciona,en el primer campo en vez de colocar un numero cualquiera coloco Precio: 7, en el otro campo es tipo number por lo cual puedo controlar el numero por el que quiero que se multiplique y lo muestra en el otro campo, al pulsar Agregar Producto crea otra linea con la que puedo seguir multiplicando como se ve en la imagen

Lo que necesito es sumar el total de esas multiplicación y mostrarla en el campo que dice total. use un for pero solo me muestra el total de cualquiera de las lineas que toco, cuan debe sumarse todas las lineas

Anexo Codigo para que lo ejecuten y puedan ver como funciona.

<!DOCTYPE html>
<html lang="es_ES">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">

        var nextinput = 0;
        function AgregarCampos(){
            nextinput++;
            campo = '<li id="idLi'+nextinput+'">' +
            '<input type="text" size="15" id="txt' + nextinput + '" step="any" oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\');" />' +
            '<input type="number" size="15" id="nmb' + nextinput + '" step="any" oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\');" />' +
            '<input type="text" size="15" id="acumu' + nextinput + '" step="any"/></li>';

            $("#campos").append(campo);
        }
        function multiplicar(txt, nmb, acumu) {

            var m1 = document.getElementById(txt).value; 
            var m2 = document.getElementById(nmb).value;
            var P = /precio: (\d+)/i;
            var match = m1.match(P);
            var Price = parseInt(match[1]);

            r = Price * m2;
            document.getElementById(acumu).value = r;

            let total = 0, numeros = acumu;
            for(let i of numeros) total += i;
            document.getElementById('T').value = r;
        }
    </script>

</head>
<body>
    <form id="form" name="form" method="post">
         <div align="left">
    <a href="#" onclick="AgregarCampos();">Agregar Producto</a>
    <ul id="campos"></ul>
        <tr>
                <td>
                    Total
                </td>
                <td>
                    <input type="text" id="T" value="0" disabled>
                </td>
            </tr>
    </div>
    </form>
</body>
</html>

Gracias por su ayuda y sugerencia que puedan brindarme

2 respuestas 2

2

No es necesario asignar IDs dinámicos a los campos, sería más fácil si les asignas nombre y, si esperas enviarlo poder usarlos después, conviene agregar corchetes [] para que sean tratados como arreglos al procesar el formulario. Solo el campo de total necesita ID para poder acceder fácilmente y asignar el valor.

De esta forma, envías el evento a la función y, desde ahí, puedes obtener los 3 elementos necesarios para multiplicar y, posteriormente, sumar.

  • En los selectores de jQuery el ^ es para especificar que el nombre del campo comienza con la cadena especificada.
  • Luego, una expresión regular más adecuada para "limpiar" el precio es /\D/g, que va a tomar todos los caracteres no numéricos para eliminarlos con .replace().
  • Para asegurar que obtienes un número, si algo falla con parseInt(), se agrega || 0 al final de la sentencia. Por ejemplo, un campo vacío podría devolver NaN
  • Realizas la multiplicación y la asignas al campo correspondiente
  • Al final, recorres todos los campos acumu para sumarlos y mostrar el total

var nextinput = 0;
function AgregarCampos(){
    nextinput++;
    campo = `<li id="idLi${nextinput}">
            <input type="text" size="15" name="txt[]" step="any" oninput="multiplicar(event);" value="Precio: ">
            <input type="number" size="15" name="nmb[]" step="any" oninput="multiplicar(event);">
            <input type="text" size="15" name="acumu[]" step="any" disabled>
        </li>`;

    $("#campos").append(campo);
}
function multiplicar(e) {
    // Obtener LI padre desde el evento
    let li = $(e.target).closest('li');
    // Obtener texto de precio, separando por 'Precio:'
    let textos = $(li).find('[name^="txt"]').val().split('Precio:');
    // Obtener precio desde el último elemento de textos
    let precio = parseInt(textos[textos.length - 1]) || 0;
    // Obtener cantidad
    let cantidad = parseInt($(li).find('[name^="nmb"]').val()) || 0;
    // Multiplicar y asignar
    $(li).find('[name^="acumu"]').val(precio * cantidad);
    
    // Inicializar total
    let total = 0;
    // Recorrer todos los acumulados para sumar
    $('[name^="acumu"]').each((index, item) => {
        // Incrementar total
        total += parseInt($(item).val());
    });
    $('#total').val(total);
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <form id="form" name="form" method="post">
         <div align="left">
    <a href="#" onclick="AgregarCampos();">Agregar Producto</a>
    <ul id="campos"></ul>
        <tr>
                <td>
                    Total
                </td>
                <td>
                    <input type="text" id="total" value="0" disabled>
                </td>
            </tr>
    </div>
    </form>

Importante: Ya tienes cargada la libería jQuery, lo mejor es usar sus métodos para acceder a elementos y realizar operaciones. No tiene sentido combinar con Javascript puro.

10
  • No sabia usar los métodos de JQuery por eso solo usaba Javascript hasta donde lo conozco, Pero Tu código por obvia razones esta mas limpio que el mio y optimizado, Gracias por la explicación y la respuesta esta perfecta gracias por tus conocimientos, debo aprender mas Commented el 12 mar. 2021 a las 19:58
  • @TheRiddler, de hecho, todo esto se puede hacer casi de la misma forma sin jQuery, pero lo apliqué porque vi que lo estás cargando desde el inicio, si es solo para agregar los elementos, entonces no es necesaria la librería.
    – Triby
    Commented el 12 mar. 2021 a las 20:07
  • exacto ese script de la librería es para cargar los elementos y poder añadir cada linea al darle clic, ademas como dije al inicio esto es algo que hice de manera rápida para luego intentar incluirla en un proyecto grande como lo comente arriba en mi pregunta donde deje el enlace Commented el 12 mar. 2021 a las 20:30
  • @TheRiddler, lo siento, no había visto ese enlace.
    – Triby
    Commented el 12 mar. 2021 a las 20:39
  • por curiosidad que tan complejo ves hacer lo que pregunte allí? estoy intentando realizarlo, pero estoy iniciando MVC y posiblemente me de mis golpes Commented el 12 mar. 2021 a las 20:48
0

Reemplaze esto

            let total = 0, numeros = acumu;
            for(let i of numeros) total += i;
            document.getElementById('T').value = r;

por esto

var total = 0;
            $(".monto").each(function () {
                if (isNaN(parseFloat($(this).val()))) {
                    total += 0;
                } else {
                    total += parseFloat($(this).val());
                }
            });
            document.getElementById('T').value = total;
        }

En esta linea le agregue la class monto

'<input type="text" size="15" id="acumu' + nextinput + '" step="any" class="monto" /></li>';

Y Funciono bien

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.