फॉर्म सबमिट करें जावास्क्रिप्ट बेस्ट प्रैक्टिस निष्पादित करें?

Question

जब कोई फ़ॉर्म सबमिट किया जाता है तो मैं एक जावास्क्रिप्ट फ़ंक्शन चलाने के लिए चाहता हूं। मुद्दा यह है कि, जब फॉर्म सबमिट किया जाता है, तो पृष्ठ को पुनः लोड किया जाता है और फॉर्म मान URL को GET पैरामीटर के रूप में जोड़ दिए जाते हैं। मैं इसे वर्तमान पृष्ठ पर रहना चाहता हूं और केवल जावास्क्रिप्ट फ़ंक्शन चला सकता हूं।

मैं सोच रहा था कि पेज रीलोड और पैरामीटर भेजे जाने से बचने के लिए सबसे अच्छा अभ्यास (या आप क्या करते हैं)।

Answer 1

फॉर्म सबमिट होने पर जावास्क्रिप्ट कोड निष्पादित करने के लिए onsubmit ईवेंट का उपयोग करें। फिर आप फॉर्म जमा करने को अक्षम करने के लिए झूठी वापसी कर सकते हैं या उत्तीर्ण घटना preventDefault विधि को कॉल कर सकते हैं।

उदाहरण के लिए:

<script> 
function doSomething() { 
    alert('Form submitted!'); 
    return false; 
} 
</script> 

<form onsubmit="return doSomething();" class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

यह काम करता है, लेकिन यह सबसे अच्छा नहीं कूड़े के लिए जावास्क्रिप्ट के साथ अपने एचटीएमएल, बस के रूप में आप इनलाइन सीएसएस नियमों के बहुत सारे नहीं लिखना चाहिए है। कई जावास्क्रिप्ट ढांचे चिंताओं के इस अलगाव को सुविधाजनक बनाता है। JQuery में आप जावास्क्रिप्ट कोड का उपयोग करके एक ईवेंट को बाध्य करते हैं:

<script> 
$('.my-form').on('submit', function() { 
    alert('Form submitted!'); 
    return false; 
}); 
</script> 

<form class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

Answer 2

फॉर्म की सबमिट घटना में ईवेंट हैंडलर संलग्न करें। सुनिश्चित करें कि यह डिफ़ॉल्ट कार्रवाई रद्द कर देता है।

क्विर्क मोड में a guide to event handlers है, लेकिन आप संभवतः कोड को सरल बनाने और ब्राउज़र के बीच अंतर को दूर करने के लिए लाइब्रेरी का उपयोग करना बेहतर होगा। सभी प्रमुख (जैसे YUI और jQuery) ईवेंट हैंडलिंग सुविधाओं को शामिल करते हैं, और tiny event libraries का एक बड़ा संग्रह है।

का तरीका यहां बताया YUI 3 में ऐसा होता है:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> 
<script> 
    YUI().use('event', function (Y) { 
     Y.one('form').on('submit', function (e) { 
      // Whatever else you want to do goes here 
      e.preventDefault(); 
     }); 
    }); 
</script> 

यदि जावास्क्रिप्ट किसी भी कारण से विफल रहता है कि यकीन है कि the server will pick up the slack करें।

Answer 3

मुझे पता है कि इसके लिए थोड़ा देर हो चुकी है। लेकिन मैंने हमेशा सोचा कि घटना श्रोताओं को बनाने का सबसे अच्छा तरीका सीधे जावास्क्रिप्ट से है। इनलाइन सीएसएस शैलियों को लागू नहीं करने की तरह।

function validate(){ 
    //do stuff 
} 
function init(){ 
    document.getElementById('form').onsubmit = validate; 
} 
windows.onload = init; 

इस तरह आपके पास अपने एचटीएमएल में ईवेंट श्रोताओं का समूह नहीं है।