jquery cảnh báo nếu rời khỏi trang mà không nhấp vào nút lưu

Question

Đoạn mã sau sẽ thực hiện cảnh báo nếu bạn thay đổi dữ liệu trên trang rồi rời khỏi trang. Tôi muốn điều đó - trừ khi người dùng nhấn nút lưu.

Đây là mã 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?"; 
     } 
    } 
}); 

Đây là nút đó lưu các dữ liệu:

<input class="btn-primary" name="commit" type="submit" value="Save Material"> 

CẬP NHẬT Cảm ơn tymeJV !!!!!!!

Trong trường hợp ai đó cần nó, công trình này:

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

Answer 1

Với bạn lưu thông tin nút:

<input class="btn-primary" name="commit" type="submit" value="Save Material"> 

Bạn có thể thiết lập giá trị của formmodified

$("input[name='commit']").click(function() { 
    formmodified = 0; 
}); 

Séc của bạn cuối cùng không được kích hoạt ngay bây giờ

Answer 2

$('#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. 
}); 

Bạn có thể sử dụng chức năng Google JQuery Form Serialize, thao tác này sẽ thu thập tất cả các mục nhập biểu mẫu và lưu vào mảng. Tôi đoán giải thích này là đủ :)

Answer 3

Đây không phải là câu trả lời chính xác cho câu hỏi trên nhưng để tham khảo cho những người đang tìm kiếm giải pháp cho vấn đề 'thông báo cho người dùng về thay đổi biểu mẫu chưa được lưu' như tôi, tôi ' d muốn giới thiệu plugin jQuery AreYouSure. Plugin rất nhẹ này xử lý tất cả các loại hạt và chữ in đậm như thay đổi hình thức hoàn nguyên, nhấp vào nút đặt lại biểu mẫu, thêm/xóa các trường biểu mẫu, v.v. mà không cần phải lo lắng gì thêm.

Answer 4

Nếu bạn muốn ngăn chặn trang rời khỏi khi một liên kết được nhấp, bạn có thể liên kết với các sự kiện beforeunload và vượt qua e trong:

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