2

he realizado un formulario con varios input dinamico el cual me suman la cantidad y el precio y me lo muestra en el campo total pero a la hora de sumar todos los input para sacar el totalfinal el campo no me lo muestra, estoy utilizando .innerHtml para mostrarlo. el formulario lo estoy cargando en un modal les agradeceria su ayuda pues es mi primer proyecto.

//he realizado un formulario con varios input dinamico el cual me suman la cantidad y el precio y me lo muestra en el campo total pero a la hora de sumar todos los input para sacar el totalfinal el campo no me lo muestra, estoy utilizando .innerHtml para mostrarlo. el formulario lo estoy cargando en un modal les agradeceria su ayuda pues es mi primer proyecto.

$("#agrega").click(function(){

var newtr = '<tr class="item" >';
newtr = newtr + '<td><input type="number" class="iProduct"  style="width : 60px; height : 30px;"  size="12" name="cant[]" id="cantidad[]" onChange="Calcular(this);" value="1"/></td>';
newtr = newtr + '<td><input type="text" class="iProduct"    size="12" name="material[]"/></td>';
newtr = newtr + '<td><input type="text"   class="iProduct"    size="12" name="tmaterial[]"/></td>';
newtr = newtr + '<td><input type="text"   class="iProduct"    size="12" name="especi[]"/></td>';
newtr = newtr + '<td><input type="text"   class="iProduct"    size="12" name="medidas[]"/></td>';
newtr = newtr + '<td><input type="text"   class="iProduct"    size="12" name="valr[]" id="precunit[]" onChange="Calcular(this);" value="0"></td>';
newtr = newtr + '<td><input  size="12" class="iProduct" type="text" id="totalitem[]"  readonly /> ';
newtr = newtr + '<td class="eliminar"><input type="button" value="-" /> </td> </tr>';
  
    $("#tabla tbody").append(newtr);
    

 });
 
function Calcular(ele) {
  var cantidad = 0, precunit = 0, totalitem = 0 ;
  var tr = ele.parentNode.parentNode;
  var nodes = tr.childNodes;

  for (var x = 0; x<nodes.length;x++) {
      
      if (nodes[x].firstChild.id == 'cantidad[]') {
          cantidad = parseFloat(nodes[x].firstChild.value,10);
      }
      if (nodes[x].firstChild.id == 'precunit[]') {
          precunit = parseFloat(nodes[x].firstChild.value,10);
      }
      if (nodes[x].firstChild.id == 'totalitem[]') {
          anterior = nodes[x].firstChild.value;
          totalitem = parseFloat((precunit*cantidad),10);
          nodes[x].firstChild.value = totalitem;
      }
    }
   // Resultado final de cada fila ERROR, al editar o eliminar una fila
   var total = document.getElementById("total");
  if (total.innerHTML == 'NaN') {
      total.innerHTML = 0;
      // 
  }total.innerHTML = parseFloat(total.innerHTML)+totalitem -anterior ; 
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

<!-- cuerpo del diálogo -->
<form method="POST" action="insertar.php" id="form_insert" name="form_insert">   
<table class="table" id="tabla">
            <thead>
              <tr>
              <th scope="col">Cant</th>
                <th scope="col">Material</th>
                <th scope="col">Tipo de material</th>
                <th scope="col">especificaciones</th>
                <th scope="col">Medidas</th>
                <th scope="col">Precio</th>
                <th scope="col">Total</th> 
              </tr>
            </thead>
            <tbody  style="text-align: center;" >  
            </tbody>
            </table>
       </form>
  <table>
  <tr>
  <th>Total $</th>
  <td><span id="total">0</span> </td>
   </tr>
  </table> 
  <br>
  
<button type="button" class="btn btn-primary" id="agrega" onchange="RefrescaProducto();">Agregar</button>
<button type="button" id="btn_guardar"  class="btn btn-primary" data-bs-dismiss="modal">Guardar</button> 
<button type="button"  class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
      
      
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>

6
  • 1
    Este código no te funcionará correctamente: document.getElementById("tot");. Eso es debido a que no existe ningún elemento cuya id sea tot. ¿Podrías revisar eso? Commented el 13 ene. 2022 a las 7:48
  • Disculpa, es que cuando subí el documento se me olvidó ajustar unos cambios, pues cambie varias veces la id pues pense que depronto en el código tenía una id repetida pero no fue así, igual si le coloco la id total a un elemento la función no me toma ese elemento hay algo Commented el 13 ene. 2022 a las 16:06
  • Entonces, ¿vas a corregir el código de la pregunta? Recuerda usar el botón de editar para ello. Cuando lo hayas hecho déjame un comentario nombrándome (poniendo el @ delante de mi usuario) para que lo revise. Commented el 13 ene. 2022 a las 17:20
  • @padaleina ya resumi un poco mas el codigo Commented el 14 ene. 2022 a las 18:13
  • @OscarGarcia ya resumi un poco mas el codigo y cambie el id Commented el 14 ene. 2022 a las 18:13

1 respuesta 1

0

Ya que estás cargando jQuery, usa sus funciones para acceder más fácilmente a cada elemento:

  • .closest(): Seleccionar el ascendiente que cumple con el selector. Desde el campo llegas a la fila.
  • .find(): Encontrar un descendiente, no es necesario usar las celdas, puedes ir directamente por los campos para obtener su valor.
  • .eq(): Acceder a un elemento por posición. En este caso, cantidad está en posición cero, precio en la 5 e importe en la 6.
  • .val(): Obtener valor de un campo de formulario (sin proporcionar parámetro) o establecer el nuevo valor.
  • $.each(): Recorrer un arreglo o conjunto de elementos.

Una última mejora es que puedes usar plantillas literales para no tener que concatenar el HTML de la tabla.

En cuanto a la lógica, te recomiendo hacer los cálculos de la fila independientes del total general, una función aparte es muy útil para simplificar y, además, puedes usarla cuando elimines una fila, garantizando que el cálculo es correcto.

Por cierto, parseFloat() puede ocasionar un error si el campo está vacío o no puede ser convertido a número; agrega al final || 0 para evitar valores NaN.

$("#agrega").click(function(){
    let newtr = `<tr class="item">
        <td><input type="number" class="iProduct" style="width: 60px; height: 30px;" size="12" name="cant[]" onChange="Calcular(this);" value="1"></td>
        <td><input type="text" class="iProduct" size="12" name="material[]"></td>
        <td><input type="text" class="iProduct" size="12" name="tmaterial[]"></td>
        <td><input type="text" class="iProduct" size="12" name="especi[]"></td>
        <td><input type="text" class="iProduct" size="12" name="medidas[]"/></td>
        <td><input type="text" class="iProduct" size="12" name="valr[]" onChange="Calcular(this);" value="0"></td>
        <td><input size="12" class="iProduct" type="text" readonly>
        <td class="eliminar"><input type="button" value="-"></td></tr>`;
    $("#tabla tbody").append(newtr);
 });
 
function Calcular(ele) {
    let cantidad = 0,
        precunit = 0,
        totalitem = 0;
    // Obtener fila con funciones de jQuery
    let tr = $(ele).closest('tr');
    // No es necesario obtener celdas ni un ciclo si sabes dónde está cada elemento
    // Buscar input por posición
    cantidad = parseFloat($(tr).find('input').eq(0).val()) || 0;
    precunit = parseFloat($(tr).find('input').eq(5).val()) || 0;
    // Calcular total de esta fila
    totalitem = cantidad * precunit;
    // Asignar a input
    $(tr).find('input').eq(6).val(totalitem);
    // Calcular el total
    calcTotal();
}

// Función aparte, porque te servirá para otras acciones, como eliminar una fila
function calcTotal() {
    let total = 0;
    // Recorrer todas las filas
    $.each($("#tabla tbody tr"), function(index, tr) {
        // Obtener total de la fila
        let totalitem = parseFloat($(tr).find('input').eq(6).val()) || 0;
        // Incrementar total
        total += totalitem;
    });
    // Actualizar en HTML
    $('#total').text(total);
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

<!-- cuerpo del diálogo -->
<form method="POST" action="insertar.php" id="form_insert" name="form_insert">   
<table class="table" id="tabla">
            <thead>
              <tr>
              <th scope="col">Cant</th>
                <th scope="col">Material</th>
                <th scope="col">Tipo de material</th>
                <th scope="col">especificaciones</th>
                <th scope="col">Medidas</th>
                <th scope="col">Precio</th>
                <th scope="col">Total</th> 
              </tr>
            </thead>
            <tbody  style="text-align: center;" >  
            </tbody>
            </table>
       </form>
  <table>
  <tr>
  <th>Total $</th>
  <td><span id="total">0</span> </td>
   </tr>
  </table> 
  <br>
  
<button type="button" class="btn btn-primary" id="agrega" onchange="RefrescaProducto();">Agregar</button>
<button type="button" id="btn_guardar"  class="btn btn-primary" data-bs-dismiss="modal">Guardar</button> 
<button type="button"  class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
      
      
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>

Nota: Eliminé los atributos id de los campos porque no son necesarios y, además, el uso de corchetes no funciona igual que en el atributo name, por lo que estarías duplicando y no serían útiles para acceder a cada campo por ID.

1

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.