> Faqs > Deseo activar la tecla ENTER para envío de formulario.

Deseo activar la tecla ENTER para envío de formulario.

Buenas tardes!

Estoy aquí buscando ayuda, ya que necesito ingresar un formulario LOGIN pero no tengo activada la tecla ENTER para el envío del formulario. Soy extremadamente nuevo en HTML y he visto algunas respuestas y por más que trato de entender en donde posicionar el código para activarlo, he tratado pero no he logrado nada... El código que tengo es este:

<script>
	function usrpas(){
	if (document.form1.txt.value=="Admin1" && document.form1.num.value=="Admin1"){window.location="Admin1.html";return}
 
	else {alert("Error en Usuario o Contraseña. Intenta de nuevo.")}
	}
document.oncontextmenu=new Function("return false");
</script>
<form name="form1">
	<input type="text" name="txt" placeholder="USUARIO"> <br>
	<input type="password" name="num" placeholder="CONTRASEÑA"> <br>
	<button type="button" value="ENTRAR" onclick="usrpas()"> ENTRAR
</form>

De hecho mi formulario es extremadamente sencillo y básico, he estado buscando mejorarlo, por lo pronto me gustaría poder activar que cuando el usuario presione la tecla ENTER se haga el envío del formulario (inclusive pueda notificar el fallo "else" al precionarla)

Quien me pueda ayudar, en verdad estaré súper agradecido. Muchísimas Gracias!

Respuestas

Veamos! la parte de enviar un formulario al pulsar la tecla enter es sencilla.

Simplemente tienes que colocar un atributo action en la etiqueta <form>. El action indica dónde se debe enviar el formulario y si no lo tiene, el formulario no se envía a ningún sitio, por tanto no se aplica un comportamiento en el hecho de pulsar la tecla enter sobre un campo del formulario.

Si no quieres que el formulario se envíe a ninguna otra página, entonces al menos habría que ponerle un action al valor #, que es como indicar la página actual.

<form action="#">
    <input type="text" name="nombre">
    <button>Enviar</button>
</form>

Ahora bien, el comportamiento que tú deseas no es justamente que se envíe el formulario a ningún sitio, sino ejecutar una función Javascript que realiza una comprobación. Entonces la cosa cambia.

Para conseguir lo que deseas, esa función la tienes que invocar cuando detectes un envío del formulario y eso lo tienes que realizar mediante Javascript. Detectas el envío del formulario, entonces detienes el comportamiento por defecto del envío y por último invocas tu función.

<form name="form1" action="#" id="formulario">
    <input type="text" name="txt" placeholder="USUARIO"> <br>
    <input type="password" name="text" placeholder="CONTRASEÑA"> <br>
    <button>ENTRAR</button>
</form>

<script>
    function usrpas(){
        if (document.form1.txt.value=="Admin1" && document.form1.num.value=="Admin1"){
            window.location="Admin1.html";
            return;
        }
        alert("Error en Usuario o Contraseña. Intenta de nuevo.");
    }

    document.getElementById("formulario").addEventListener('submit', function(e) {
        console.log('hohoho');
        e.preventDefault();
        usrpas();
    });
</script>
Alberto
600 15 42 18