'在关闭或离开未保存更改的页面之前警告用户'并# 39;t工作

'Warning user before closing or leaving page with unsaved changes' doesn't work

本文关键字：警告 用户 工作 离开 保存更改      更新时间：2023-09-26

首先，我是Javascript和Jquery的新手。我需要一个功能，在离开未保存的更改页面之前警告用户。我知道类似的问题已经发出，但我永远无法得到页面显示消息，当我应用线程中提到的方法。以下问题在该领域最流行，因此我主要利用线程中的方法:

在离开未保存更改的网页前警告用户

这是我的页面:

    <gt-form:form commandName="manager" method="GET" id="managerForm" name="managerForm">
    //Form fields,buttons
    </gt-form:form>
    <script>
        var formSubmitting = false;
        var setFormSubmitting = function() {
            debugger;
            formSubmitting = true;
        };
    </script>
    <script>
        window.onload = function() {
            window.addEventListener("beforeunload", function(e) {
                var confirmationMessage = 'It looks like you have been editing something. ';
                confirmationMessage += 'If you leave before saving, your changes will be lost.';
                if (formSubmitting || !isDirty()) {
                    return undefined;
                }
                (e || window.event).returnValue = confirmationMessage; //Gecko + IE
                return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
            });
        };
    </script>
    <script>
    $('#managerForm').data('serialize',$('#managerForm').serialize()); // On load save form current state
    var isDirty = function() { $(window).bind('beforeunload', function(e){
        if($('#managerForm').serialize()!=$('#managerForm').data('serialize')) isDirty=true;
        else e=null; // i.e; if form state change show warning box, else don't show it.
    }); };
    </script>

我做错了什么?

我已经这样实现了，并且它工作了:

var somethingChanged=false;
        $('#managerForm input').change(function() { 
            somethingChanged = true; 
       }); 
        $(window).bind('beforeunload', function(e){
            if(somethingChanged)
                return "You made some changes and it's not saved?";
            else 
                e=null; // i.e; if form state change show warning box, else don't show it.
        });
    });

事情是绑定我的表单字段的改变事件与form-id。

Try this: 

        var formSubmitting = false;
        var setFormSubmitting = function() {
            debugger;
            formSubmitting = true;
        };
    window.onload = function() {
        window.addEventListener("beforeunload", function(e) {
            console.log('beforeunload');
            var confirmationMessage = 'It looks like you have been editing something. ';
            confirmationMessage += 'If you leave before saving, your changes will be lost.';
            var isDirty = false;
            //Here we are checking the condition
            if ($('#managerForm').serialize() != $('#managerForm').data('serialize')) isDirty = true;
            else e = null; // i.e; if form state change show warning box, else don't show it.

            if (formSubmitting || !isDirty) {
                return undefined;
            }
            (e || window.event).returnValue = confirmationMessage; //Gecko + IE
            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
        });
    };


$(function(){
	$('#myForm').data('serialize',$('#myForm').serialize()); 
	$(window).bind('beforeunload', function(e){
		console.log($('#myForm').serialize(), $('#myForm').data('serialize'));
		if($('#myForm').serialize()!=$('#myForm').data('serialize'))
			return "You made some changes and it's not saved?";
		else 
			e=null; // i.e; if form state change show warning box, else don't show it.
	});
});
function saveData() {
	$('#myForm').data('serialize',$('#myForm').serialize());
	// and save the same in your database through ajax call. So that you won't have prompt once you save the data
}
<form id="myForm" name="myForm" action="" method="post" onsubmit="return saveData();">
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
  <select name="myOptions">
	<option value="">--Select--</option>
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="mercedes">Mercedes</option>
	<option value="audi">Audi</option>
 </select>
  <input type="submit" value="Submit"/>
</form>

相关文章：