HTML को संशोधित किए बिना जावास्क्रिप्ट में फॉर्म सबमिट इवेंट को सुनना

इस आलेख में, हम बिना HTML को संशोधित किए फॉर्म सबमिट इवेंट को सुनने की आम चुनौती को संबोधित करते हैं HTML कोड को संशोधित करना होगा। HTML में onClick या onSubmit विशेषताओं पर भरोसा करने के बजाय, हम एक शुद्ध JavaScript समाधान प्रदान करते हैं।

इसे प्राप्त करने के लिए, हम EventTarget.addEventListener विधि का लाभ उठाते हैं। यह विधि हमें एक कॉलबैक फ़ंक्शन को पंजीकृत करने की अनुमति देती है जिसे फॉर्म तत्व पर एक विशिष्ट घटना होने पर निष्पादित किया जाएगा।

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
}

"ele" को अपने फॉर्म तत्व के संदर्भ से बदलें और "कॉलबैक" को उस फ़ंक्शन से बदलें जिसे आप फॉर्म सबमिट करते समय निष्पादित करना चाहते हैं।

मूल फॉर्म सबमिशन व्यवहार को रोकने के लिए (यानी) , पृष्ठ को ताज़ा करते हुए), अपने कॉलबैक फ़ंक्शन के भीतर .preventDefault() विधि का उपयोग करें:

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

लाइब्रेरी के साथ इवेंट सबमिट करना सुनना

हालांकि आवश्यक नहीं है, आप सबमिट इवेंट सुनने के लिए लाइब्रेरी का उपयोग करना पसंद कर सकते हैं। यहां बताया गया है कि आप सामान्य पुस्तकालयों का उपयोग करके इसे कैसे कर सकते हैं:

jQuery

$(ele).submit(callback);

उदाहरण

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

इन तकनीकों का उपयोग करके, आप कर सकते हैं HTML कोड को छुए बिना जावास्क्रिप्ट में फॉर्म सबमिट इवेंट को आसानी से सुनें।