En este artículo, aprenderemos cómo enviar un formulario o una parte de un formulario sin actualizar la página usando JQuery, y comprenderemos su implementación a través del ejemplo.
¿Cómo evitar que se envíe un formulario HTML?
En general, cuando enviamos un formulario, debemos hacer clic en el botón Enviar y nuestra página navegará a otra ruta como se menciona en el atributo de acción del formulario, pero podemos hacerlo en el fondo de la página web sin navegar la página web a otras rutas. . Y esto es posible usando el método event.preventDefault() que bloquea el evento predeterminado y no permite que se active. Cuando hacemos clic en el botón Enviar, se activa un evento, por lo que debemos evitar este evento porque este evento es responsable de llevar al usuario a otras rutas. Entonces, tenemos que adjuntar un onsubmitdetector de eventos a ese formulario, de modo que cuando el usuario haga clic en el botón Enviar, podamos obtener ese objeto de evento y evitar que se active ese evento específico, utilizando el método preventDefault. Después de prevenir el evento usando el método event.preventDefault() , entonces necesitamos obtener los valores del formulario y hacer una solicitud de publicación a esas rutas en particular donde queremos publicar nuestros valores.
Requisito previo: se requiere una comprensión básica de HTML , CSS , Javascript y JQuery antes de continuar.
Acercarse:
- Cree un archivo HTML y agregue el CDN de la biblioteca jquery sobre el código javascript.
- Cree 2 campos de entrada, un botón de envío y un lapso para mostrar el resultado.
- Agregue un oyente onsubmit al formulario y reciba una devolución de llamada con un solo parámetro.
Ejemplo : en este ejemplo, hemos tomado una solicitud de publicación falsa en la que necesitamos publicar información y el servidor devolverá la identificación como un objeto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
color: green;
}
h3 {
text-align: center;
}
input,
span {
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<h1 class="container">
GeeksforGeeks
</h1>
<h3>Submitting the form without page refresh</h3>
</div>
<form>
<div class="container">
<input placeholder="Name" type="text" name="Name" />
<input placeholder="Job" type="text" name="job" />
<input type="submit" />
</div>
<span class="container"></span>
</form>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('form').on('submit', function(event) {
event.preventDefault();
// It returns a array of object
let userinfo = $(this).serializeArray();
let user = {};
userinfo.forEach((value) => {
// Dynamically create an object
user[value.name] = value.value;
});
let url = "https://reqres.in/api/users";
$.ajax({
method: "POST",
url: url,
data: user
}).done(function(msg) {
// When the request is successful
$('span').text('user is successfully created with Id ' + msg.id);
}).fail(function(err, textstatus, error) {
$('span').text(textstatus);
});
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA