Dado un formulario , la tarea es detener la acción de envío del formulario usando jQuery.
Enfoque 1: Usar el método on() y preventDefault( ) en jQuery. Adjuntamos un evento de envío al formulario usando el método on() , lo que significa que el script dentro de este método se ejecuta cada vez que se envía el formulario. Hay un parámetro e que representa el parámetro de evento u objeto. Usamos el método preventDefault() con este evento para evitar la acción predeterminada del formulario, es decir, evitar que se envíe el formulario.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
margin-top: 2rem;
cursor: pointer;
}
form {
width: 300px;
margin: 0 auto;
}
input[type="submit"] {
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<form>
<fieldset>
<legend>Details</legend>
<label for="first_name">First name:</label>
<input type="text" id="first-name" name="fname" />
<br /><br />
<label for="last_name">Last name:</label>
<input type="text" id="last-name" name="lname" />
<br /><br />
<label for="gender">Gender : </label>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female <br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br /><br />
<input type="submit" value="Submit" class="submit-btn" />
</fieldset>
</form>
<script type="text/javascript">
$("form").on("submit", function (e) {
e.preventDefault();
});
</script>
</body>
</html>
Producción:
Enfoque 2: Usar el método de envío() en la biblioteca jQuery. También adjuntamos un evento de envío al formulario, pero aquí estamos usando el método de envío() en lugar del método on() . Dentro de este método, simplemente devolvemos falso para que no se ejecute la acción predeterminada del formulario.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
margin-top: 2rem;
cursor: pointer;
}
form {
width: 300px;
margin: 0 auto;
}
input[type="submit"] {
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<form>
<fieldset>
<legend>Details</legend>
<label for="first_name">First name:</label>
<input type="text" id="first-name" name="fname" />
<br /><br />
<label for="last_name">Last name:</label>
<input type="text" id="last-name" name="lname" />
<br /><br />
<label for="gender">Gender : </label>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female <br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br /><br />
<input type="submit" value="Submit" class="submit-btn" />
</fieldset>
</form>
<script type="text/javascript">
$("form").submit(function (e) {
return false;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA