1

Estoy generando input dinámicos mediante un botón(+) pero quiero que me de la suma automática de todos los input generados llamados costos, sin embargo no he podido lograrlo, ojala me puedan ayudar, gracias.

// agregar registro
$("#agregar").click(function() {
  var html = '';
  html += '<div id="inputFormRow">';
  html += '<div class="input-group ">';
  html += '<input type="text" name="descripcion[]" id="pedido" placeholder="Ingresa tu pedido" class="form-control m-input"  required="" autocomplete="off" method="POST">';
  html += '<input type="text" id="total" name="costo[]" class="suma" placeholder="Costo $"  required="" autocomplete="off" method="POST">';
  html += '<div class="input-group-append">';
  html += '<button id="removeRow" type="button" class="btn btn-danger">X</button>';
  html += '</div>';
  html += '</div>';
  $('#newRow').append(html);
});
// borrar registro
$(document).on('click', '#removeRow', function() {
  $(this).closest('#inputFormRow').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow">
  <button id="agregar" type="button" class="btn btn-info">+</button>
</div>

2
  • 1
    Buenas tardes, el código debe estar en su respectivo formato como texto y no en imágenes. el 1 feb. 2023 a las 22:03
  • Ya lo puse de esa manera! el 1 feb. 2023 a las 23:07

3 respuestas 3

0

A tus inputs puedes agregarle un atributo data-type="precio"

<input data-type="precio" type="text" id="total" ....>

Declaras una variable para tener la suma, recorres con .each los inputs que tengan ese atributo y vas sumando sus valores.

    $("#btnCalcular").click(function (e) { 
        e.preventDefault();
        
        var suma = 0;

        $('input[data-type="precio"]').each(function (index, item) {
            var valor = $(item).val();
            suma += parseFloat(valor);
        });

        alert(suma);
    });
1
  • Agradezco mucho sus respuestas, me fueron de gran ayuda! Muchas gracias. el 2 feb. 2023 a las 19:23
0

Buen día,

Esta respuesta muestra el cálculo de la suma de forma dinámica sin necesidar de agregar un botón extra.

Nota: Los id de los elementos deben ser únicos por lo que deberías cambiar esa sección en tu código para que cada vez que se cree una fila cada elemento tenga un valor único en el DOM, por ejemplo, podrías agregar una variable fila y añadirla al nombre de los id de cada elemento de esa fila. Pero voy a ignorar ese problema y enfocarme únicamente en la suma.

En primer lugar, debes tener un elemento que muestre el total:

<input id="sumaTotal">

Luego, puedes crear una función para realizar la suma de todos los input con clase suma.

// Función para calcular la suma
function calculateSum() {
  var sum = 0;
  $(".suma").each(function() {
    sum += parseFloat($(this).val()) || 0;
  });
  $("#sumaTotal").val(sum);
}

Por último, debes llamar esa función cada vez que algún elemento input de clase suma cambie:

$(".suma").on("change", calculateSum);

Ejemplo completo:

// agregar registro
$("#agregar").click(function() {
  var html = '';
  html += '<div id="inputFormRow">';
  html += '<div class="input-group ">';
  html += '<input type="text" name="descripcion[]" id="pedido" placeholder="Ingresa tu pedido" class="form-control m-input"  required="" autocomplete="off" method="POST">';
  html += '<input type="text" id="total" name="costo[]" class="suma" placeholder="Costo $"  required="" autocomplete="off" method="POST">';
  html += '<div class="input-group-append">';
  html += '<button id="removeRow" type="button" class="btn btn-danger">X</button>';
  html += '</div>';
  html += '</div>';
  $('#newRow').append(html);
  
  // Llamar a la función para calcular la suma cada vez que alguna suma cambie
  $(".suma").on("change", calculateSum);
});

// borrar registro
$(document).on('click', '#removeRow', function() {
  $(this).closest('#inputFormRow').remove();
});

// Función para calcular la suma
function calculateSum() {
  var sum = 0;
  $(".suma").each(function() {
    sum += parseFloat($(this).val()) || 0;
  });
  $("#sumaTotal").val(sum);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow">
  <button id="agregar" type="button" class="btn btn-info">+</button>
  <span>Total: </span>
  <input id="sumaTotal">
</div>

0

Por ser input dinámicos, debes tener un botón que haga el cálculo después de estar creados. Aunque, pensándolo bien, se puede calcular sin el uso de botones. Te dejo los dos ejemplos.

Corregí algunos errores de sintaxis como los id que deben ser únicos para cada elemento del DOM o usar clases en su lugar.

El código está comentado, pero si tienes dudas adicionales, déjalas en los comentarios.

//Declarar una variable para inicializar un identificador único
let i = 0;

// agregar registro
$("#agregar").click(function() {
  //incrementar la variable en uno
  i++;
  //Declarar el ID único para cada div
  var idDiv = 'inputFormRow' + i;
  var html = '';
  html += '<div id="'+idDiv+'">';
  html += '<div class="input-group ">';
  html += '<input type="text" name="descripcion[]" placeholder="Ingresa tu pedido" class="form-control m-input pedido"  required="" autocomplete="off">';
  html += '<input type="text" class="costo" name="costo[]" placeholder="Costo $" required="" autocomplete="off">';
  html += '<div class="input-group-append">';
  html += '<button type="button" class="removeRow" data-id="'+i+'" class="btn btn-danger">X</button>';
  html += '</div>';
  html += '</div>';
  $('#newRow').append(html);
});

//Calcular el total
$('#calcular').on('click', function() {
  //Cada vez que se de click en el botón, se reinicia el total
  let total = 0;
  //Recorrer cada input con clase costo
  $('.costo').each(function() {
    //Sumar los valores convirtiéndolos a entero
    total = total + parseInt($(this).val());
  })
  //Asignar el total al input 
  $('#total').val(total);
});

//Borrar registro
$(document).on('click', '.removeRow', function() {
  //Capturar el id del div a borrar
  let idActual = $(this).data('id');
  $('#inputFormRow' + idActual).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow">
  <button id="agregar" type="button" class="btn btn-info">+</button>
</div>
<div>
  <br><br>
  <button id="calcular">Calcular total</button>
  <input type="text" id="total" name="total" placeholder="total" class="form-control m-input" required autocomplete="off">
</div>

Edición: Sin el uso de botones, sería así:

//Declarar una variable para inicializar un identificador único
let i = 0;

// agregar registro
$("#agregar").click(function() {
  //incrementar la variable en uno
  i++;
  //Declarar el ID único para cada div
  var idDiv = 'inputFormRow' + i;
  var html = '';
  html += '<div id="'+idDiv+'">';
  html += '<div class="input-group ">';
  html += '<input type="text" name="descripcion[]" placeholder="Ingresa tu pedido" class="form-control m-input pedido"  required="" autocomplete="off">';
  html += '<input type="text" class="costo" name="costo[]" placeholder="Costo $" required="" autocomplete="off">';
  html += '<div class="input-group-append">';
  html += '<button type="button" class="removeRow" data-id="'+i+'" class="btn btn-danger">X</button>';
  html += '</div>';
  html += '</div>';
  $('#newRow').append(html);
});

//Calcular el total
$(document).on('input', '.costo', function() {
  //Cada vez que se modifique un valor, se reinicia el total
  let total = 0;
  //Recorrer cada input con clase costo
  $('.costo').each(function() {
    //Si no hay valor, se setea en cero
    parcial = $(this).val() == '' ? 0 : $(this).val();
    //Sumar los valores convirtiéndolos a entero
    total = total + parseInt(parcial);
  })
  //Asignar el total al input 
  $('#total').val(total);
});

//Borrar registro
$(document).on('click', '.removeRow', function() {
  //Capturar el id del div a borrar
  let idActual = $(this).data('id');
  $('#inputFormRow' + idActual).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newRow">
  <button id="agregar" type="button" class="btn btn-info">+</button>
</div>
<div>
  <br><br>
  <input type="text" id="total" name="total" placeholder="total" class="form-control m-input" required autocomplete="off">
</div>

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.