[SOLUCIONADO] Error con .submit() en AJAX

[berkeleyPunk]

Hola!

Utilizo la función que aportan en esta página para conocer el tipo de error relacionado con AJAX.

Intento usar la función .submit() pero no me funciona. El siguiente código me manda el error 0, según la función que aporta la página antes mencionada. O sea, un error de Not connect: Verify Network.

Código HTML:

<form id="mi_formulario">
        <input id="nombre" name="nombre">
        <input id="email"  name="email">
        <br>
        <input type="submit" value="Enviar">
    </form>
 
    <div id="cajaRespuesta"></div>
 

Código Javascript:

$(document).ready(function() {
            $("#mi_formulario").submit(function() {
                var datosSerializados = $("#mi_formulario").serialize();
                alert(datosSerializados);
 
                $.ajax({
                    type: "POST",
                    data: datosSerializados,
                    url:  "process.php",
                    success: function(response) {
                        $("#cajaRespuesta").html(response);
                    }
                });
            });
        });
 

Datos del process.php

Código PHP:

      $nombre = $_POST["nombre"];
    $email  = $_POST["email"];
    $respuesta = $nombre . " " . $email;    
    sleep(2);
    echo "Respuesta AJAX, OK\nDatos introducidos: " . $respuesta; 
   

¿Alguna idea?

Saludos!

[Elvixx10]

Prueba con esto $(document).on("submit", "#id", function(){
//ajax

return false;
});

[PHPeros]

Efectivamente debes prevenir que el formulario se envíe.

Código Javascript:

$(document).ready(function() {
            $("#mi_formulario").submit(function(e) {
                e.preventDefault(); // Cancelar el evento
                var datosSerializados = $("#mi_formulario").serialize();
                alert(datosSerializados);
 
                $.ajax({
                    type: "POST",
                    data: datosSerializados,
                    url:  "process.php",
                    success: function(response) {
                        $("#cajaRespuesta").html(response);
                    }
                });
            });
        });
 

[berkeleyPunk]

Iniciado por PHPeros

Efectivamente debes prevenir que el formulario se envíe...

Ok, ok. Funciona ok.

Ayúdame a entender, maestro PHPeros.

Entonces, si no se hace preventDefault al submit, entonces se envía el formulario, se actualiza el documento y por tanto no se ve la respuesta en pantalla, porque el AJAX quedó atrás, antes que la página se actualizara.

Dos preguntas:

1) Pero aún así, ¿no debería verse al menos por un instante la respuesta en pantalla, justo antes que se refresque la pantalla?

2) Si tiene que cancelarse la acción por defecto del submit, ¿tiene sentido un input type=submit en un formulario que trabajará con AJAX?

Con respecto a la segunda pregunta. Si no tiene sentido, entonces por qué jQuery se molesta en crear una función .submit() para manejar inputs tipo submit? Y si sí tienen sentido los inputs tipo submit dentro de formularios para AJAX, ¿por qué hay que hacerles preventDefault, ya que, en este caso, mejor utilizo un <button>?

Saludos!

[PHPeros]

¿Entonces ya lo solucionaste?

Entonces, si no se hace preventDefault al submit, entonces se envía el formulario, se actualiza el documento y por tanto no se ve la respuesta en pantalla, porque el AJAX quedó atrás, antes que la página se actualizara.

Exacto.

Pero aún así, ¿no debería verse al menos por un instante la respuesta en pantalla, justo antes que se refresque la pantalla?

Supongo que es inapreciable, ya que el envío se realiza al terminar la ejecución del script, cosa que lleva una décima de segundo.

Si tiene que cancelarse la acción por defecto del submit, ¿tiene sentido un input type=submit en un formulario que trabajará con AJAX?

Tiene que cancelarse porque en este caso, estás reemplazando el envio normal de un formulario (GET o POST), por una petición asíncrona vía AJAX.

¿en este caso, mejor utilizo un <button>?

También podrías usar un simple botón, pero entonces tendrías que trabajar con el evento onclick del botón y no con el onsubmit del formulario. Dos eventos muy distintos.

[berkeleyPunk]

Iniciado por PHPeros

¿Entonces ya lo solucionaste? ...

Sí, lo solucioné con el preventDefault.

Como siempre, muchas gracias y hasta pronto.