window.onbeforeunload - फ़ॉर्म

Question

सबमिट नहीं करते समय केवल चेतावनी दिखाएं मैं एक फॉर्म पर मूल्य बदलने के बाद उपयोगकर्ता को नेविगेट करने से रोकने के लिए window.onbeforeunload का उपयोग कर रहा हूं। यह ठीक काम कर रहा है, सिवाय इसके कि जब उपयोगकर्ता फॉर्म सबमिट करता है (वांछित नहीं) चेतावनी भी दिखाता है।

फॉर्म सबमिट होने पर चेतावनी दिखाए बिना मैं इसे कैसे कर सकता हूं?

वर्तमान कोड:

var formHasChanged = false; 

$(document).on('change', 'form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea', function (e) { 
    formHasChanged = true; 
}); 

$(document).ready(function() { 
    window.onbeforeunload = function (e) { 
     if (formHasChanged) { 
      var message = "You have not saved your changes.", e = e || window.event; 
      if (e) { 
       e.returnValue = message; 
      } 
      return message; 
     } 
    } 
}); 

Answer 1

की तरह कुछ नाम बदलने के लिए एक ध्वज आप के लिए काम कर सकते हैं स्थापित करने के लिए प्रपत्र के प्रस्तुत घटना का उपयोग करना चाहते हो सकता है तो ।

var formHasChanged = false; 
var submitted = false; 

$(document).on('change', 'form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea', function (e) { 
    formHasChanged = true; 
}); 

$(document).ready(function() { 
    window.onbeforeunload = function (e) { 
     if (formHasChanged && !submitted) { 
      var message = "You have not saved your changes.", e = e || window.event; 
      if (e) { 
       e.returnValue = message; 
      } 
      return message; 
     } 
    } 
$("form").submit(function() { 
    submitted = true; 
    }); 
}); 

Answer 2

आप submit() घटना है, जो अपने प्रपत्र प्रस्तुत करने के लिए केवल हो जाएगा संभाल कर सकते हैं।

उस घटना के भीतर, अनलोड लोड करने की अनुमति देने के लिए अपने ध्वज परिवर्तनीय formHasChanged को झूठी पर सेट करें। इसके अलावा, केवल एक सुझाव है, लेकिन है कि झंडा चर का उद्देश्य बदल गया है, तो आप यह warnBeforeUnload '

$(document).submit(function(){ 
    warnBeforeUnload = false; 
}); 

Answer 3

आप onbeforeunload बाध्य करने के लिए .on का उपयोग करें() और फिर प्रपत्र प्रस्तुत करने में यह निकल करने के लिए

$(document).ready(function() { 
    // Warning 
    $(window).on('beforeunload', function(){ 
     return "Any changes will be lost"; 
    }); 

    // Form Submit 
    $(document).on("submit", "form", function(event){ 
     // disable warning 
     $(window).off('beforeunload'); 
    }); 
} 

Answer 4

मैं इस के लिए एक बेहतर समाधान के लिए देख रहा था .off() का उपयोग कर सकते हैं। हम जो चाहते हैं वह सिर्फ एक या अधिक ट्रिगर्स को हमारे "क्या आप निश्चित हैं?" संवाद बॉक्स। तो हमें अधिक से अधिक दुष्प्रभावों के लिए अधिक से अधिक कामकाज नहीं बनाना चाहिए। यदि सबमिट बटन के click ईवेंट के बिना फॉर्म सबमिट किया गया है तो क्या होगा? क्या होगा यदि हमारे क्लिक-हैंडलर isDirty स्थिति को हटा देता है लेकिन फिर फॉर्म-सबमिट बाद में अवरुद्ध हो जाता है? निश्चित रूप से हम अपने ट्रिगर्स के व्यवहार को बदल सकते हैं, लेकिन सही जगह संवाद को संभालने वाला तर्क होगा। सबमिट बटन के click ईवेंट को बाध्य करने के बजाय फॉर्म के submit ईवेंट के लिए बाध्यकारी कुछ अन्य लोगों के ऊपर इस थ्रेड में दिए गए उत्तरों का लाभ है, लेकिन यह आईएमएचओ सिर्फ गलत दृष्टिकोण को ठीक करता है।

onbeforeunload ईवेंट की घटना ऑब्जेक्ट में कुछ खोदने के बाद मुझे .target.activeElement संपत्ति मिली, जिसमें मूल तत्व है, जिसने मूल रूप से ईवेंट को ट्रिगर किया। तो, हाँ, यह बटन या लिंक है या जो कुछ भी हमने क्लिक किया है (या कुछ भी नहीं, अगर ब्राउज़र स्वयं नेविगेट हो गया हो)। हमारा "क्या आप निश्चित हैं?" संवाद तर्क उसके बाद निम्न दो घटकों को ही कम कर देता है:

1. फार्म के isDirty हैंडलिंग: "क्या आप वाकई"

   $('form.pleaseSave').on('change', function() { 
       $(this).addClass('isDirty'); 
   }); 
   

2. संवाद तर्क:

   $(window).on('beforeunload', function(event) { 
       // if form is dirty and trigger doesn't have a ignorePleaseSave class 
       if ($('form.pleaseSave').hasClass('isDirty') 
        && !$(event.target.activeElement).hasClass('ignorePleaseSave')) { 
       return "Are you sure?" 
       } 
       // special hint: returning nothing doesn't summon a dialog box 
   }); 
   

यह बस के रूप में है। कोई कामकाज की जरूरत नहीं है। बस ट्रिगर्स (सबमिट और अन्य एक्शन बटन) ignorePleaseSave कक्षा दें और जिस फॉर्म को हम pleaseSave कक्षा पर लागू संवाद प्राप्त करना चाहते हैं। पृष्ठ को उतारने के अन्य सभी कारणों से हमारे "क्या आप निश्चित हैं?" को बुलाते हैं संवाद।

पीएस मैं यहां jQuery का उपयोग कर रहा हूं, लेकिन मुझे लगता है कि .target.activeElement संपत्ति सादा जावास्क्रिप्ट में भी उपलब्ध है।