1

el objetivo es que permita enviar el formulario solo si las cantidades son mayor a 12 (una docena); es para un sistema de ventas por mayor. funciona solo con la primera fila, las demás filas ya no obedece, gracias de antemano.

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=  parseFloat( document.getElementById("cant_actual").value);
      if (cant_actual<cant_vm){
         alert("Solo se vende en cantidad, mayor a "+ cant_vm)
         document.formulario.cant_actual.focus()
         return 0; 
        }

  this.submit();
<form action="echo.php" method="POST" id="formulario">
<table>
    <tr>
        <td>Codigo</td>
        <td>Producto</td>
        <td>Cantidad</td>
        <td>Total</td>
    </tr>
     <tbody>
        <tr>
          <td><input type="text" name="" value="T000010"></td>
          <td><input type="text" name="" value="TECLADO"></td>
          <td><input type="number" name="" value="1" id="cant_actual"></td>
          <td><input type="text" name="" value="50"></td>
        <tr>
        <tr>
          <td><input type="text" name="" value="T000011"></td>
          <td><input type="text" name="" value="MOUSE"></td>
          <td><input type="number" name="" value="1" id="cant_actual"></td>
          <td><input type="text" name="" value="40"></td>
        <tr>
        <tr>
          <td><input type="text" name="" value="T000012"></td>
          <td><input type="text" name="" value="PARLANTE"></td>
          <td><input type="number" name="" value="1" id="cant_actual"></td>
          <td><input type="text" name="" value="40"></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="number" value="12" id="cant_vm">

el objetivo es que permita enviar el formulario solo si las cantidades son mayor a 12 (una docena); es para un sistema de ventas por mayor. funciona solo con la primera fila, las demás filas ya no obedece, gracias de antemano.

1
  • 2
    Los id en HTML deberían ser únicos... tienes 3 que se llaman cant_actual, por eso cuando vas a buscar el elemento, te devuelve el primero (y por esa misma razon solo funciona con ese)
    – Pipe
    Commented el 29 ago. 2022 a las 21:37

1 respuesta 1

1

La diferencia entre una ID y una clase es que una ID solo se usa para identificar un solo elemento en nuestro HTML. Los ID solo se usan cuando un elemento de la página debe tener un estilo particular aplicado. Sin embargo, una clase puede usarse para identificar más de un elemento HTML.

En el mismo caso se aplica con Javascript, asi que lo que he hecho ha sido reemplazar todos los atributos id="cant_actual" con class="cant_actual" para poder obtenerlos con la funcion document.getElementsByClassName que devuelve un array con todos los elementos.

Luego solo queda recorrer ese bucle y hacer la misma comparativa que tenías hecha.

Te adjunto la solución:

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; 
      }
    }  
}
<form action="echo.php" method="POST" id="formulario">
<table>
    <tr>
        <td>Codigo</td>
        <td>Producto</td>
        <td>Cantidad</td>
        <td>Total</td>
    </tr>
     <tbody>
        <tr>
          <td><input type="text" name="" value="T000010"></td>
          <td><input type="text" name="" value="TECLADO"></td>
          <td><input type="number" name="" value="1" class="cant_actual"></td>
          <td><input type="text" name="" value="50"></td>
        </tr>
        <tr>
          <td><input type="text" name="" value="T000011"></td>
          <td><input type="text" name="" value="MOUSE"></td>
          <td><input type="number" name="" value="1" class="cant_actual"></td>
          <td><input type="text" name="" value="40"></td>
        </tr>
        <tr>
          <td><input type="text" name="" value="T000012"></td>
          <td><input type="text" name="" value="PARLANTE"></td>
          <td><input type="number" name="" value="1" class="cant_actual"></td>
          <td><input type="text" name="" value="40"></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="number" value="12" id="cant_vm">

3
  • 1
    Ambos tengan cuidado con el cierre de las etiquetas </tr>, no lo están haciendo.
    – DjCrazy
    Commented el 29 ago. 2022 a las 22:32
  • muchas gracias c5vargas, muy clara tu explicación. Gracias
    – Arnol
    Commented el 29 ago. 2022 a las 23:05
  • Tienes razón @DjCrazy no me había dado cuenta. Ya lo he modificado 👍🏻
    – c5vargas
    Commented el 30 ago. 2022 a las 5:51

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.