0

tengo un inconveniente para sacar el total, en la funcion sacartotal solo me funciona con la primera fila, en las demás no funciona, la tabla será una tabla dinámica, agradecería su ayuda, a continuación adjunto el código HTML y JavaScript.

// funcion para vender por cantidad (mayor a 12 por docena).
// funciona gracias a esta comunidad. 
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("formulario").addEventListener('submit', validarFormulario); 
});
function validarFormulario(evento) {
    evento.preventDefault();
    let cant_vm = parseFloat( document.getElementById("cant_vm").value );
    let cant_actual = document.getElementsByClassName("cant_actual");

    for(var i = 0; i < cant_actual.length; i++) {
      if (parseFloat(cant_actual[i].value) < cant_vm) {
         alert("Solo se vende en cantidad, mayor a "+ cant_vm)
         cant_actual[i].focus()
         return 0; 
      }
    }
    this.submit(); 
}

// despues de modificar la cantidad. onchange
// llamanos la funcion sacartotal
function actualizar_total() {
  sacartotal();
}

// solo funciona con la primera fila
// sera una tabla dinaminca.
function sacartotal() {
    let prec = document.getElementsByClassName("prec")[0].value;
    let cant = parseFloat( document.getElementById("cant").value );
    let resul = document.getElementById("resul").value = prec*cant;
}
<form action="echo.php" method="POST" id="formulario">
<table>
<tr>
        <td>Producto</td>
        <td>Precio</td>
        <td>Cantidad</td>
    <!-- <td>Act. Cant.</td> -->
        <td>Total</td>
</tr>
 <tbody>

    <tr>
      <td><input type="text" name="" value="TECLADO"></td>
      <td><input type="text" name="" id="" value="50" class="prec"></td>
      <td><input type="number" name="" id="cant" value="1" class="cant_actual" 
        onchange="actualizar_total()"></td>
      <td><input type="text" name="" id="resul" value="50"></td>
    </tr>

     <tr>
      <td><input type="text" name="" value="MOUSE"></td>
      <td><input type="text" name="" id="" value="30" class="prec"></td>
      <td><input type="number" name="" id="cant" value="1" class="cant_actual"
        onchange="actualizar_total()"></td>
      <td><input type="text" name="" id="resul" value="30"></td>
    </tr>

    <tr>
      <td><input type="text" name="" value="PARLANTE"></td>
      <td><input type="text" name="" id="" value="80" class="prec"></td>
      <td><input type="number" name="" id="cant" value="1" class="cant_actual"
         onchange="actualizar_total()"></td>
      <td><input type="text" name="" id="resul" value="80"></td>
    </tr>

 </tbody>
</table>
<br>
<input class="btn" type="submit" value="Entrar">
</form>

<br>
<label>Solo se vende en cantidad, mayor a </label>
<input type="text" value="12" id="cant_vm">

saludos amigos, tengo un inconveniente para sacar el total, en la funcion sacartotal solo me funciona con la primera fila, en las demás no funciona, la tabla será una tabla dinámica, agradecería su ayuda, a continuación adjunto el código HTML y JavaScript.

3
  • Es una muuuy mala idea tener elementos con ID repetido. Por ahí ya va mal la cosa.
    – Alfabravo
    Commented el 30 ago. 2022 a las 21:33
  • Alfabravo por favor podrías ayudarme a resolverlo ?
    – Arnol
    Commented el 30 ago. 2022 a las 21:36
  • Tal vez la respuesta a esta pregunta e incluso la misma pregunta te ayude a aclarar las dudas que tienes. No es exactamente tu caso, ni tiene las mejores prácticas, pero te puede orientar un poco. Aquí hay otra pregunta que te puede orientar.
    – DjCrazy
    Commented el 31 ago. 2022 a las 1:20

1 respuesta 1

-1

Encontré la solución, a mi mismo problema, qui les comparto el código, por si alquilen lo necesita.

// funcion para vender por cantidad (mayor a 12 por docena).
// funciona gracias a esta comunidad. 
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("formulario").addEventListener('submit', validarFormulario); 
});
function validarFormulario(evento) {
    evento.preventDefault();
    let cant_vm = parseFloat( document.getElementById("cant_vm").value );
    let cant_actual = document.getElementsByClassName("cant_actual");

    for(var i = 0; i < cant_actual.length; i++) {
      if (parseFloat(cant_actual[i].value) < cant_vm) {
         alert("Solo se vende en cantidad, mayor a "+ cant_vm)
         cant_actual[i].focus()
         return 0; 
      }
    }
    this.submit(); 
}

// despues de modificar la cantidad. onchange
// llamanos la funcion sacartotal
function actualizar_total() {
  sacartotal();
}

// solo funciona con la primera fila
// sera una tabla dinaminca.
function sacartotal() {
    var cant = document.querySelectorAll('.cant');
    var prec = document.querySelectorAll('.prec');
    var subtotals = document.querySelectorAll('.resul');

    for(var i = 0; i < cant.length; i++){ 
      subtotals[i].value = cant[i].value * prec[i].value;
    }
}
<form action="echo.php" method="POST" id="formulario">
<table>
<tr>
        <td>Producto</td>
        <td>Precio</td>
        <td>Cantidad</td>
    <!-- <td>Act. Cant.</td> -->
        <td>Total</td>
</tr>
 <tbody>

    <tr>
      <td><input type="text" name="" value="TECLADO"></td>
      <td><input type="text" name="" value="50" class="prec"></td>
      <td><input type="number" name="" required class="cant_actual cant" 
        onchange="actualizar_total()"></td>
      <td><input type="text" name="" class="resul"></td>
    </tr>

     <tr>
      <td><input type="text" name="" value="MOUSE"></td>
      <td><input type="text" name="" value="30" class="prec"></td>
      <td><input type="number" name="" required class="cant_actual cant"
        onchange="actualizar_total()"></td>
      <td><input type="text" name="" class="resul"></td>
    </tr>

    <tr>
      <td><input type="text" name="" value="PARLANTE"></td>
      <td><input type="text" name="" value="80" class="prec"></td>
      <td><input type="number" name="" required class="cant_actual cant"
         onchange="actualizar_total()"></td>
      <td><input type="text" name="" class="resul"></td>
    </tr>

 </tbody>
</table>
<br>
 <input class="btn" type="submit" value="Entrar">
</form>

<br>
<label>Solo se vende en cantidad, mayor a </label>
<input type="hidden" value="12" id="cant_vm">

2
  • 1
    Por favor, lee Cómo responder y pulsa en editar para mejorar tu respuesta. La respuesta será de utilidad solamente si explicas qué cambios has hecho y por qué. Recuerda siempre que Stack Overflow en español no es un repositorio de código.
    – padaleiana
    Commented el 31 ago. 2022 a las 1:38
  • Si respondiste dos veces lo mismo a tu pregunta que hiciste dos veces, entonces la pregunta es la misma y esta duplicada. Igual tu respuesta no es buena, no explica nada de nada del problema.
    – gbianchi
    Commented el 1 sept. 2022 a las 12:41

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.