Question

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

Warn user before leaving web page with unsaved changes

以下是我在页面中的内容：

    <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>

我做错了什么？

Answer 1

试试这个：

        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.
        });
    };

Answer 2

＆＃13;

$(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
}

＆＃13;

<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>

＆＃13;

Answer 3

我已经实现了这种方式，并且有效：

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绑定我的表单字段的已更改事件。

＆＃39;在关闭或离开未保存更改页面之前警告用户＆＃39;不起作用

3 个答案: