Cómo evitar que la página se vuelva a cargar después de enviar el formulario – JQuery

Estoy trabajando en un sitio web para mi clase de desarrollo de aplicaciones y tengo el problema más extraño.

Estoy usando un poco de JQuery para enviar datos del formulario a una página php llamada ‘process.php, y luego subirlo a mi DB. El error más extraño es que la página vuelve a cargar al enviar el formulario, y no puedo ni mi vida descubrir cómo hacer que el JQuery continúe en segundo plano. Ese es el punto de usar JQuery en primer lugar jaja. De todos modos, enviaré todo el código relevante, avíseme si necesita algo más.

 $(document).ready(function () { $('#button').click(function () { var name = $("#name").val(); var email = $("#email").val(); $.post("process.php", { name: name, email: email }).complete(function() { console.log("Success"); }); }); });  

Join our mailing list!

Este es mi php si es relevante:

 query($save1); if (!$success) { die("Couldn't enter data: ".$mysqli->error); echo "unsuccessfully"; } echo "successfully"; ?> 

Esta es una captura de pantalla del registro:

captura de pantalla de registro

El elemento , cuando se coloca en un formulario, enviará el formulario automáticamente a menos que se especifique lo contrario. Puedes usar las siguientes 2 estrategias:

  1. Utilice para anular el comportamiento de envío predeterminado
  2. Utilice event.preventDefault() en el evento onSubmit para evitar el envío de formularios

Solución 1:

  • Ventaja: cambio simple en el marcado
  • Desventaja: subvierte el comportamiento de forma predeterminado, especialmente cuando JS está desactivado. ¿Qué sucede si el usuario desea presionar “enter” para enviar?

Inserta un atributo de type extra en el marcado de tu botón:

  

Solución 2:

  • Ventaja: el formulario funcionará incluso cuando JS esté desactivado, y respeta el formulario UI / UX estándar de manera que al menos se utiliza un botón para el envío

Evitar el envío de formularios predeterminado al hacer clic en el botón. Tenga en cuenta que esta no es la solución ideal, ya que de hecho debería estar escuchando el evento de envío, no el evento de clic de botón :

 $(document).ready(function () { // Listen to click event on the submit button $('#button').click(function (e) { e.preventDefault(); var name = $("#name").val(); var email = $("#email").val(); $.post("process.php", { name: name, email: email }).complete(function() { console.log("Success"); }); }); }); 

Mejor variante:

En esta mejora, escuchamos el evento de envío emitido desde el elemento

:

 $(document).ready(function () { // Listen to submit event on the 
itself! $('#main').submit(function (e) { e.preventDefault(); var name = $("#name").val(); var email = $("#email").val(); $.post("process.php", { name: name, email: email }).complete(function() { console.log("Success"); }); }); });

Mejor variante: use .serialize() para serializar su formulario, pero recuerde agregar atributos de name a su entrada:

El atributo de name es necesario para que .serialize() , según la documentación de jQuery :

Para que se incluya un valor de elemento de formulario en la cadena serializada, el elemento debe tener un atributo de nombre.

   

Y luego en tu JS:

 $(document).ready(function () { // Listen to submit event on the 
itself! $('#main').submit(function (e) { // Prevent form submission which refreshes page e.preventDefault(); // Serialize data var formData = $(this).serialize(); // Make AJAX request $.post("process.php", formData).complete(function() { console.log("Success"); }); }); });