मैं जावास्क्रिप्ट में फ़ॉर्म सबमिट ईवेंट कैसे सुन सकता हूं?

Question

मैं अपना स्वयं का फॉर्म सत्यापन जावास्क्रिप्ट पुस्तकालय लिखना चाहता हूं और मैं Google पर देख रहा हूं कि कैसे पता लगाया जाए कि क्या सबमिट बटन पर क्लिक किया गया है, लेकिन मैंने पाया है कि सभी कोड हैं जहां आपको onSubmit="function()"html में onClick का उपयोग करना होगा ।

मैं इस जावास्क्रिप्ट को बनाना चाहूंगा ताकि मुझे onSubmit या onClick जावास्क्रिप्ट को जोड़ने जैसा कोई html कोड न छूना पड़े।

Comments

क्यों नहीं document.forms['yourForm'].onsubmit = function(){}? या addEventListener?

— जोसेफ सिलबर

क्या आप वास्तव में जांचना चाहते हैं कि क्या सबमिट बटन क्लिक किया गया था, या क्या आप यह जांचना चाहते हैं कि उपयोगकर्ता कब फॉर्म सबमिट करता है (जो वे बटन पर क्लिक करके या किसी एक फ़ील्ड से Enter दबाकर कर सकते हैं)?

— nnnnnn

Answer 1

जब आवश्यक नहीं है तो लोग हमेशा jQuery का उपयोग क्यों करते हैं?
लोग साधारण जावास्क्रिप्ट का उपयोग क्यों नहीं कर सकते?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback एक फ़ंक्शन है जिसे आप फॉर्म सबमिट होने पर कॉल करना चाहते हैं।

के बारे में EventTarget.addEventListener, MDN पर इस दस्तावेज़ को देखें ।

मूल submitघटना को रद्द करने के लिए (फ़ॉर्म को सबमिट होने से रोकें), .preventDefault()अपने कॉलबैक फ़ंक्शन में उपयोग करें,

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

---

submitपुस्तकालयों के साथ घटना को सुनकर

यदि किसी कारण से आपने लाइब्रेरी का निर्णय लिया है, तो आप आवश्यक हैं (आप पहले से ही एक का उपयोग कर रहे हैं या आप क्रॉस-ब्राउज़र मुद्दों से निपटना नहीं चाहते हैं), यहां आम पुस्तकालयों में प्रस्तुत कार्यक्रम को सुनने के तरीकों की एक सूची दी गई है:

1. jQuery

   $(ele).submit(callback);

   eleप्रपत्र तत्व संदर्भ कहां है, और callbackकॉलबैक फ़ंक्शन संदर्भ है। संदर्भ

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };

   बहुत सीधा है, जहां $scopeआपके नियंत्रक के अंदर रूपरेखा द्वारा प्रदान की गई गुंजाइश है । संदर्भ

3. प्रतिक्रिया

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }

   बस एक हैंडलर में onSubmitप्रस्ताव पास करें। संदर्भ

4. अन्य ढांचे / पुस्तकालय

   अपने ढांचे के प्रलेखन का संदर्भ लें।

---

मान्यकरण

आप हमेशा जावास्क्रिप्ट में अपना सत्यापन कर सकते हैं, लेकिन HTML5 के साथ हमारे पास मूल सत्यापन भी है।

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

आप किसी भी जावास्क्रिप्ट की जरूरत नहीं है! जब भी देशी सत्यापन का समर्थन नहीं किया जाता है, तो आप जावास्क्रिप्ट सत्यापनकर्ता को वापस कर सकते हैं।

डेमो: http://jsfiddle.net/DerekL/L23wmo1L/

Comments

"Ghastly ... ugly" कोड की वह 5 पंक्तियाँ jQuery की 4,000 पंक्तियों द्वारा प्रदान की गई आवश्यक कार्यक्षमता को बदल देती है, जिसे "ghastly ... ugly" कोड भी होना चाहिए।

— रॉबजी

मेरे पास jQuery के खिलाफ बहुत कुछ नहीं है, केवल वे ही जो इसे बिना किसी जादू के भस्म के रूप में उपयोग करते हैं, यह महसूस करते हुए कि वे पूरी चीज़ को कोड की कुछ पंक्तियों के साथ बदल सकते हैं। यह पता करने के लिए समय क्यों नहीं लिया कि ब्राउज़र वास्तव में कैसे काम करते हैं? यह वास्तव में कठिन नहीं है।

— 1

@ - और सिर्फ इसलिए कि आप एक पुस्तकालय के साथ कुछ कर सकते हैं इसका मतलब यह नहीं है कि आपको या तो नहीं होना चाहिए, और न ही दूसरों को "बस लाइब्रेरी एक्स का उपयोग करें" के उत्तरों द्वारा मूल बातें सीखने से मना किया जाना चाहिए। जब कोई जावास्क्रिप्ट के बारे में एक विशिष्ट प्रश्न पूछता है, तो यह सादे जावास्क्रिप्ट का उपयोग करके प्रश्न का उत्तर देने के लिए विनम्र है। हर तरह से अपनी पसंद की लाइब्रेरी से कुछ सुझाएं, लेकिन सवाल का जवाब देना पहली प्राथमिकता होनी चाहिए।

— रॉब

मेरा व्यक्तिगत रूप से मानना ​​है कि एक व्यक्ति को पहले मूल बातें जानना चाहिए।

— डेरेक 會 功夫 ere

उसी भावना में, हमें वास्तव में अधिक असेंबली भाषा लिखने की कोशिश करनी चाहिए। हाफ-जोकिंग (मैं काफी jquery समाधान पसंद करता हूं और लगता है कि यह एक अंतहीन खरगोश छेद है यदि आप वास्तव में समझना चाहते हैं कि हुड के नीचे क्या हो रहा है), लेकिन हां, मुझे खुशी है कि मैं कुछ विधानसभा भाषा जानता हूं, और पता है कि टीसीपी कैसे कनेक्शन बनाये जाते हैं, आदि मैं अभी भी किसी को निचले स्तर के समाधान के लिए नहीं सिखाऊँगा ताकि उन्हें व्हाट्स-अंडर-हुड के चमत्कार सिखा सकें।

— जोश सटरफील्ड

Answer 2

यह सबसे आसान तरीका है जब आप अपने स्वयं के जावास्क्रिप्ट फ़ंक्शन को कॉल कर सकते हैं जब ए onSubmit होता है।

एचटीएमएल

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

जावास्क्रिप्ट

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

Comments

आपने 'सबमिट' फ़ंक्शन को बाँधने का निर्णय क्यों लिया? फ़ंक्शन में 'इस' का कोई उपयोग नहीं है।

— जूनियर

bindवास्तव में अनावश्यक है।

— पिस्तालर

Answer 3

अपनी आवश्यकताओं के आधार पर आप jQuery जैसे पुस्तकालयों के बिना भी निम्नलिखित कर सकते हैं:

इसे अपने सिर में जोड़ें:

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

और आपका रूप अभी भी कुछ इस तरह दिखाई दे सकता है:

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

Comments

addEventListenerअन्य डेवलपर्स को अपने श्रोताओं को जोड़ने की अनुमति देने के लिए हमेशा ऑनस्बमिट या ऑनलोड के बजाय उपयोग करें ।

— beytarovski

Answer 4

JQuery के साथ:

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});