Dado un formulario HTML y la tarea es enviar el formulario después de hacer clic en el botón ‘Entrar’ usando jQuery. Para enviar el formulario usando el botón ‘Entrar’, usaremos el método jQuery keypress() y para verificar que el botón ‘Entrar’ esté presionado o no, usaremos el valor del código de tecla del botón ‘Entrar’.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> </script> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <h3 style="color: green;font-size: 28px;"> GeeksforGeeks </h3> <form class="info"> <input name="fname" /><br> <input name="lname" /><br> <button type="submit">Submit</button> </form> </body> </html>
Código JavaScript:
<script>
// Wait for document to load
$(document).ready(() => {
$('.info').on('submit', () => {
// prevents default behaviour
// Prevents event propagation
return false;
});
});
$('.info').keypress((e) => {
// Enter key corresponds to number 13
if (e.which === 13) {
$('.info').submit();
console.log('form submitted');
}
})
</script>
Explicación:
Usamos jQuery event.whichpara verificar el código clave en la pulsación de tecla. El código clave para la tecla Intro es 13, por lo que si el código clave coincide con trece, usamos el método .submit() en el elemento del formulario para enviar el formulario.
Código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<h3 style="color: green;font-size: 28px;">
GeeksforGeeks
</h3>
<form class="info">
<input name="fname" /><br><br>
<input name="lname" /><br><br>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(() => {
$('.info').on('submit', () => {
return false;
});
});
$('.info').keypress((e) => {
if (e.which === 13) {
$('.info').submit();
alert('Form submitted successfully.')
}
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA