जांचें कि वेब फॉर्म मान बदल गए हैं

Question

मेरे पास एक बहु-चरण फ़ॉर्म है और उपयोगकर्ता जानकारी को संशोधित करने या जोड़ने के लिए किसी भी पृष्ठ पर नेविगेट कर सकता है। एक मेनू है जो वर्तमान प्रगति दिखाता है, उपयोगकर्ता द्वारा किए गए कदम, और किसी भी पूर्ण या लंबित चरण पर नेविगेट करने की अनुमति देता है।

एक बड़े बटन "सहेजें और जारी रखें" के बावजूद कुछ उपयोगकर्ता आगे मेनू पर नेविगेट करने के लिए इस मेनू पर क्लिक करते हैं। मुझे जांचना है - यदि किसी फॉर्म में मान बदल गए हैं और पूछें: "परिवर्तन सहेजें? हां/नहीं"।

सबसे अच्छा तरीका क्या है (न्यूनतम क्लाइंट-साइड जावास्क्रिप्ट कोड के साथ) आप मुझे यह देखने के लिए सुझाव देते हैं कि फॉर्म मान बदल गए हैं या नहीं?

थोड़ी देर बाद संपादित:

मैं बताना चाहता है कि बहु-चरण प्रपत्र चरणों के बीच पोस्टबैक का उपयोग करता है भूल गया।

Answer 1

jQuery "डर्टी प्रपत्र" प्लगइन आपकी सहायता कर सकते हैं:

http://plugins.jquery.com/project/dirtyform

Answer 2

jQuery Form Wizard plugin इस मामले में उपयोगी होना चाहिए।

See Demo Here

Answer 3

यह JQuery के बिना पूरी तरह से आसान है क्योंकि रूपों के लिए onchange घटना लगातार ब्राउज़रों में समर्थित नहीं है नहीं है।

मैं कहूंगा कि आप कर सकते हैं, अन्य उत्तरों में प्रस्तुत jQuery प्लगइन में से एक का उपयोग करें।

यदि jQuery प्रश्न से बाहर है, तो प्रत्येक इनपुट तत्व में एक सरल onchange='if (this.value != this.defaultValue) dirty_flag = true;' जोड़ने पर विचार करें। आप एक साफ दृष्टिकोण चाहते हैं, एक <script> अनुभाग में इस कार्य करें:

document.getElementById("formid").onchange = 
function() { if (this.value ....) } 

Answer 4

के बाद से आप का उल्लेख आप चरणों के बीच वापस पोस्ट कर रहे हैं, मैं एक छिपी हुई फ़ील्ड कि संग्रहीत करता है अगला कदम क्या है होगा। डिफ़ॉल्ट रूप से यह फ़ॉर्म का अगला चरण होगा। "सहेजें और जारी रखें" बटन बस फ़ॉर्म सबमिट करता है।

तब प्रत्येक मेनू प्रविष्टि तब इस छिपे हुए फॉर्म का मान उचित चरण में सेट करेगी, और फिर यह फॉर्म सबमिट करेगी। कुछ ऐसा:

<script type="text/javascript"> 
function goToStep(step) { 
document.getElementById("hiddenFieldID").value = step; 
document.getElementById("formID").submit(); 
} 
</script> 

<ul id="menu"> 
    <li><a href="javascript:goToStep(1);">Step 1</a></li> 
    <li><a href="javascript:goToStep(2);">Step 2</a></li> 
    etc... 
</ul> 

Answer 5

इस तरह के फॉर्म मानों को जांचने का प्रयास करें। initFormChangeCheck() की कॉल सभी मानों को दर्पण ऑब्जेक्ट में प्रतिलिपि बनाता है और प्रत्येक फॉर्म तत्व पर ईवेंट mousedown और keydown सेट करता है जो चेक चेंज दिनचर्या को कॉल कर रहे हैं। आप एक अंतराल से भी जांच सकते हैं।

var fList = new Object(); 
function initFormChangeCheck() { 
    for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) { 
    el = document.forms[0].elements[fOi]; 
    fList[el.name] = el.value; 
    el.onmousedown = checkChange; 
    el.onkeydown = checkChange; 
    } 
} 
function checkChange() { 
    var changed = false; 
    for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) { 
    el = document.forms[0].elements[fOi]; 
    if (fList[el.name] != el.value) { 
     changed = true; 
    } 
    } 
    document.forms[0].show_invoice.disabled = changed; 
} 

पीटर Gotrendy News