如果没有点击保存按钮就离开页面，jquery 会发出警告
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16322042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery warn if leaving page without clicking the save button
提问by Reddirt
The following code executes a warning if you change data on the page and then leave the page. I want that - except when the user presses the save button.
如果您更改页面上的数据然后离开该页面，以下代码将执行警告。我想要 - 除非用户按下保存按钮。
This is the jquery code:
这是jquery代码：
$(document).ready(function() {
formmodified=0;
$('form *').change(function(){
formmodified=1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (formmodified == 1) {
return "New information not saved. Do you wish to leave the page?";
}
}
});
This is the button that saves the data:
这是保存数据的按钮：
<input class="btn-primary" name="commit" type="submit" value="Save Material">
UPDATE Thanks tymeJV !!!!!!!
更新 谢谢 tymeJV !!!!!!!
In case someone else need it, this works:
如果其他人需要它，这有效：
$(document).ready(function() {
formmodified=0;
$('form *').change(function(){
formmodified=1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (formmodified == 1) {
return "New information not saved. Do you wish to leave the page?";
}
}
$("input[name='commit']").click(function() {
formmodified = 0;
});
});
采纳答案by tymeJV
Given your save button info:
鉴于您的保存按钮信息：
<input class="btn-primary" name="commit" type="submit" value="Save Material">
You can set the value of formmodified
您可以设置值 formmodified
$("input[name='commit']").click(function() {
formmodified = 0;
});
Your check at the end shouldn't be triggered now
现在不应该触发您最后的检查
回答by Wasim A.
$('#form').data('serialize',$('#form').serialize()); // On load save form current state
$(window).bind('beforeunload', function(e){
if($('#form').serialize()!=$('#form').data('serialize'))return true;
else e=null; // i.e; if form state change show box not.
});
You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. I guess this explain is enough :)
您可以使用 Google JQuery Form Serialize 函数，这将收集所有表单输入并将其保存在数组中。我想这个解释就足够了:)
回答by wedi
This is not an exact answer to the above question but for reference for those who are searching for a solution to the problem 'notify users about unsaved form changes' like I was, I'd like to recommend the jQuery plugin AreYouSure. This very lightweight plugin handles all the nuts and bolds like reverted form changes, clicking the form reset button, adding/removing form fields etc. without any further fiddling.
这不是对上述问题的确切答案，而是供那些像我一样正在寻找“通知用户未保存的表单更改”问题解决方案的人参考，我想推荐 jQuery 插件AreYouSure。这个非常轻量级的插件可以处理所有的坚果和粗体，比如恢复表单更改、单击表单重置按钮、添加/删除表单字段等，无需任何进一步的摆弄。
回答by JasonM
Your warning will not be presented until blur, which isn't going to be 100% foolproof. Change the following lines to make it air tight:
您的警告在模糊之前不会显示，这不会是 100% 万无一失的。更改以下几行以使其气密：
$('form *').change(function () {
to
到
$('form *').on('change input', function () {
回答by Outside Edge
If you want to prevent the page from leaving when a link is clicked, you can bind to the beforeunload event and pass e in:
如果你想阻止页面在点击链接时离开，你可以绑定到 beforeunload 事件并传入 e：
$(document).ready(function() {
var modified = false;
$(window).bind('beforeunload', function(e){
if (modified) {
$.confirm({
'title' : 'Did You Save Your Changes?',
'message' : 'It seems as if you have made changes but didn\'t click Save.\nAre you sure you want to leave the page?',
'buttons' : {
'OK' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. This can be omitted if you prefer.
}
})
}
e.preventDefault();
}
});
});
回答by curiosity
First, you need to get the value of your inputs if the user has done any changes to the form. so i came up with this answer:
首先，如果用户对表单进行了任何更改，您需要获取输入的值。所以我想出了这个答案：
document.querySelector('.send').addEventListener("click", function(){
window.btn_clicked = true;
});
window.onbeforeunload = function(){
if(!window.btn_clicked){
var bla = $('#lot_t').val(); // getting the value of input
if(!bla == ''){ //checking if it is not null
return 'Are you sure to leave this page?';
}
}
};
