Question

Estoy haciendo un formulario que al enviar primero valida los datos y si son incorrectos te sale una advertencia y un enlace para volver al formulario y si esta todo correcto, te sale un mensaje diciéndote que esta todo correcto y debería haber una cuenta de 5 a 0 y posteriormente un redicionamiento a la página de inicio, digo debería porque no consigo hacer una simple cuenta atras, pongo el código

$(document).ready(function() {
$("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();   

            var seccion = $(this).attr("id").valueOf();

            $.ajax({
                type: type,
                url: url, /*---> si le pongo aquí la página a la que quiero que vaya, lo hace tanto si se valida el form como si no */
                data: cadena,               
                success: function(data) {
                    if (data) {             
                        //return;
                        for (var i = 5; i > 0; i--) {
                            $("h3#cuentaatras").text("(" + i + ")")  
                        }
                        $(".section").html(data); 

                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        });    

  }); 

<h3 id="cuentatras">(5)</h3>

¿Como hago una simple cuenta atras y que luego se redireccione hacía la página que quiera con jquery? Sin usar plugins porque lo que entiendo que quiero es algo muy sencillo.

Saludos

Answer 1

Utilizando tu mismo código y sin complicarme mucho (se podría hacer mejor):

$(document).ready(function() {
$("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();   

            var seccion = $(this).attr("id").valueOf();

            $.ajax({
                type: type,
                url: url, /*---> si le pongo aquí la página a la que quiero que vaya, lo hace tanto si se valida el form como si no */
                data: cadena,               
                success: function(data) {
                    if (data) {             
                        var contador = 5;
                        var contadorElem = $("h3#cuentaatras");
                        contadorElem.text(contador);
                        setInterval(function() {
                            contadorElem.text(contador);
                            if (--contador == 0) {
                                window.location.href='url a la que quieras ir';
                        }, 1000;

                        $(".section").html(data); 

                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        });    

  }); 

Answer 2

Hola @bichomen,

para una simple cuenta atrás y la redirección, ni siquiera hace falta usar JQuery:

...
setTimeout(window.location('pagina_destino.php'),5000);
...

Si querés mostrar una cuenta regresiva al usuario, crear una función para llamar en setTimeout() y un contador para saber si se refresca el contador o se redirige.

Acá te dejo la referencia de la función y unos ejemplos de uso.

Saludos cordiales