0

Como puedo hacer para que se envié un formulario al ingresar cierta cantidad de caracteres? en este caso seria un input que el cliente cargaría un numero de DNI, lo que me piden es que no tenga un botón, si no que se envié al completar el dato.

tengo esto:

<form action="#" method="POST" name="formulario">
    <label>CONSULTAR DNI PUNTUAL</label>
    <input autofocus class="input_user" type='text' maxlength="30" name="dni" id='dni' 
    value="" placeholder="N° DNI" required/><span id="error"></span>
   <input hidden type="submit" name="pedir_info_2" value="Solicitar informacion" 
   class="pedir_info">
</form>

  <script>
    window.addEventListener("load",function(){
    formulario = document.formulario;
    dni = document.formulario.dni;
    campoError = document.getElementById("error");
                            
    dni.addEventListener("input",function(){
       campoError.innerHTML= "";
    });
      dni.addEventListener("change",envioAutomatico);
    });

    function enviarFormulario(e){
     e = e || window.event;
     if(dni.value==""){ 
      e.preventDefault();
      campoError.innerHTML ="rellene este campo";
      }else{
       console.log("se ha procedio al envío del formulario");
      };
     };

     function envioAutomatico(){
     formulario.addEventListener("submit",enviarFormulario);
     formulario.submit();
     }
     </script>

Esto lo que hace es que se envie sin el boton, pero tampoco lo hace automaticamente, tengo que hacer clic en cualquier parte de la pantalla y lo ejecuta.. Y no se como aplicar la condicion de los caracteres.. No se mucho de JS, el codigo lo capte de este sitio que lo compartieron y lo modifique a mis datos, pero no se como aplicar lo demas, si alguien me pudiera guiar, os agradecere!

1 respuesta 1

1

El evento "change" espera hasta que el input cambie, este evento no se dispara hasta remover el focus del input, por eso debes hacer click fuera del input, es decir, remover el focus del input.

Si lo que quieres es enviarlo justo después de escribir puedes usar el evento keyup, que se ejecuta al presionar una tecla. Por ejemplo:

window.addEventListener("load",function(){
        formulario = document.formulario;
        dni = document.formulario.dni;
        campoError = document.getElementById("error");
                            
        dni.addEventListener("input",function(){
            campoError.innerHTML= "";
        });

        dni.addEventListener("keyup",envioAutomatico);
    });

    function enviarFormulario(e){
        e = e || window.event;
            if(dni.value==""){ 
                e.preventDefault();
                campoError.innerHTML ="rellene este campo";
            }else{
                console.log("se ha procedio al envío del formulario");
        };
    };

    function envioAutomatico(){
        if ( dni.value.length == 8 ) {
            formulario.addEventListener("submit",enviarFormulario);
            formulario.submit();
        }
    }
<form action="#" method="POST" name="formulario">
    <label>CONSULTAR DNI PUNTUAL</label>
    <input autofocus class="input_user" type='text' maxlength="30" name="dni" id='dni' value="" placeholder="N° DNI" required/>
    <span id="error"></span>
    <input hidden type="submit" name="pedir_info_2" value="Solicitar informacion" class="pedir_info">
</form>

En este caso debes realizar una validación, si hay x cantidad de caracteres entonces envias el formulario, de lo contrario se enviara en cuanto se presione una tecla.

1
  • 1
    Muchas gracias! justo esto necesitaba, hare la validación con los caracteres! Commented el 5 abr. a las 19:08

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.