validacion - validar formulario javascript html5

¿Cómo saber si el usuario hizo clic en Cancelar en un JavaScript antes de descargar el cuadro de diálogo?

Question

Estoy mostrando un cuadro de diálogo cuando alguien intenta navegar desde una página en particular sin haber guardado su trabajo. Uso el evento Javascript antes de descargar, funciona muy bien.

Ahora quiero ejecutar un código JavaScript cuando el usuario hace clic en "Cancelar" en el cuadro de diálogo que aparece (diciendo que no quiere navegar fuera de la página).

es posible? Estoy usando jQuery también, entonces ¿hay algún evento como beforeunloadcancel al que me pueda vincular?

ACTUALIZACIÓN : la idea es guardar y dirigir a los usuarios a una página web diferente si eligen cancelar

Answer 1

Imposible. Tal vez alguien me pruebe mal ... ¿Qué código quieres ejecutar? ¿Desea guardar automáticamente cuando hacen clic en cancelar? Eso suena contra-intuitivo. Si todavía no has guardado automáticamente, creo que tiene poco sentido guardar automáticamente cuando presionen "Cancelar". Tal vez podría resaltar el botón de guardar en su controlador onbeforeunload para que el usuario vea lo que debe hacer antes de navegar.

Answer 2

No pensé que fuera posible, pero intenté con esta idea y funciona (aunque es algo así como un truco y puede que no funcione de la misma manera en todos los navegadores):

window.onbeforeunload = function () {
$(''body'').mousemove(checkunload);
return "Sure thing";
};
function checkunload() {
$(''body'').unbind("mousemove");
//ADD CODE TO RUN IF CANCEL WAS CLICKED
}

Answer 3

Puedes hacerlo así:

$(function() {
$(window).bind(''beforeunload'', function() {
setTimeout(function() {
setTimeout(function() {
$(document.body).css(''background-color'', ''red'');
}, 1000);
},1);
return ''are you sure'';
});
});

El código dentro del primer método setTimeout tiene un retraso de 1 ms. Esto es solo para agregar la función a la UI queue . Como setTimeout ejecuta de forma asíncrona, el intérprete de Javascript continuará llamando directamente a la declaración de return , que a su vez activa el modal dialog los navegadores. Esto bloqueará la UI queue y el código del primer setTimeout no se ejecutará hasta que se cierre el modal. Si el usuario presionó cancelar, disparará otro setTimeout que se dispara en aproximadamente un segundo. Si el usuario confirma con ok, el usuario lo redireccionará y el segundo setTimeout nunca se activará.

ejemplo: http://www.jsfiddle.net/NdyGJ/2/

Answer 4

Sé que esta pregunta es vieja ahora, pero en caso de que alguien todavía tenga problemas con esto, he encontrado una solución que parece funcionar para mí,

Básicamente, el evento de unload se beforeunload después del evento beforeunload . Podemos usar esto para cancelar un tiempo de espera creado en el evento beforeunload , modificando la respuesta de jAndy:

$(function() {
var beforeUnloadTimeout = 0 ;
$(window).bind(''beforeunload'', function() {
console.log(''beforeunload'');
beforeUnloadTimeout = setTimeout(function() {
console.log(''settimeout function'');
$(document.body).css(''background-color'', ''red'');
},500);
return ''are you sure'';
});
$(window).bind(''unload'', function() {
console.log(''unload'');
if(typeof beforeUnloadTimeout !==''undefined'' && beforeUnloadTimeout != 0)
clearTimeout(beforeUnloadTimeout);
});
});

EDITAR: jsfiddle aquí

Answer 5

window.onbeforeunload = function() {
if (confirm(''Do you want to navigate away from this page?'')) {
alert(''Saving work...(OK clicked)'')
} else {
alert(''Saving work...(canceled clicked)'')
return false
}
}

con este código también, si el usuario hace clic en ''Cancelar'' en IE8 aparecerá el cuadro de diálogo de navegación predeterminado.