Reputation: 4967
How can I prevent onbeforeunload from being called when clicking the submit button?
$(document).ready(function()
{
$('input:text,input:checkbox,input:radio,textarea,select').one('change', function()
{
//('BODY').attr('onbeforeunload',"return 'Leaving this page will cause any unsaved data to be lost.';");
if(
window.onbeforeunload = function() { return 'You have unsaved changes!'; }
});
});
Upvotes: 13
Views: 20723
Reputation: 293
If you just want to disable Onbeforeunload Event on submit button. So here an example code
document.getElementById('sub').onsubmit = function(e) {
window.onbeforeunload = null;
return true;
}
But if you want to monitors forms changes and alerts(confirmation Box) the user before leaving the page, Then I'll suggest you to you Plugin here is one jquery plugin that do exactly what i have written https://github.com/snikch/jquery.dirtyforms
The Plugin Monitior Your forms changes and alert before leaving the Page
The Best Part "It will not dispaly the alert Box when you click on Submit Button" OR You Submit your Form
Example Code:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
<script type="text/javascript">
$(function() {
$('#form_verify').dirtyForms();
})
</script>
<title></title>
<body>
<form id="form_verify" action="a.php" method="POST">
Firt Name <input type="text">
Last Name <input type="file">
<input type="submit">
</form>
Upvotes: 1
Reputation: 431
you can use .on()
to bind onbeforeunload and then use .off()
to unbind it in form submission, short and sweet
$(document).ready(function () {
$(window).on('beforeunload', function(){
return "You have unsaved changes!";
});
$(document).on("submit", "form", function(event){
$(window).off('beforeunload');
});
}
Upvotes: 5
Reputation: 1032
Modified it : now ignores form submission
$(document).ready(function () {
var warn_on_unload = "";
$('input:text,textarea').on('change', function () {
warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";
$("form").submit(function () {
warn_on_unload = "";
});
window.onbeforeunload = function () {
if (warn_on_unload != '') {
return warn_on_unload;
}
}
});
});
Upvotes: 3
Reputation: 4967
Here is the final code:
$(document).ready(function()
{
var warn_on_unload="";
$('input:text,input:checkbox,input:radio,textarea,select').one('change', function()
{
warn_on_unload = "Leaving this page will cause any unsaved data to be lost.";
$('#submit').click(function(e) {
warn_on_unload = "";});
window.onbeforeunload = function() {
if(warn_on_unload != ''){
return warn_on_unload;
}
}
});
});
Upvotes: 7
Reputation: 449843
You can't prevent the calling of unbeforeunload, but using a global flag variable, you can control whether it displays a warning.
in the document, add the script:
warn_on_unload = "You have unsaved changes!"
in the submit event, add:
warn_on_unload = "";
the definition of the event, change to:
window.onbeforeunload = function() { return warn_on_unload; }
through warn_on_unload
, you can now switch the warning message on or off at will.
Upvotes: 8