इनपुट फील्ड खाली है या नहीं, इसके आधार पर बटन्स को डिसेबल या इनेबल करना सीखें।
जब आप वेब पर फॉर्म भरते हैं तो आप देखेंगे कि अक्सर आप तब तक फॉर्म सबमिट नहीं कर सकते जब तक सभी या कुछ टेक्स्ट फील्ड भरे नहीं जाते (आवश्यक फील्ड)। यही सिद्धांत चेकबॉक्स और रेडियो बटन्स पर लागू होता है।
यहाँ बताया गया है कि अपने बटन की स्थिति (इनेबल्ड बनाम डिसेबल्ड) को कैसे नियंत्रित करें आधार पर कि आपका इनपुट फील्ड खाली है या नहीं।
HTML
निम्न HTML को अपने एडिटर में जोड़ें:
<input class="input" type="text" placeholder="fill me" /> <button class="button">Click Me</button>JavaScript
निम्न JavaScript जोड़ें
let input = document.querySelector(".input") let button = document.querySelector(".button") button.disabled = true input.addEventListener("change", stateHandle) function stateHandle() { if (document.querySelector(".input").value === "") { button.disabled = true } else { button.disabled = false } }अब आपके पास एक बटन है जो तब तक डिसेबल्ड है जब तक आपका इनपुट फील्ड खाली है, और जैसे ही आप इसे भरना शुरू करते हैं इनेबल्ड हो जाता है।
सभी कार्यशील कोड के साथ डेमो देखें।
डेमो कोड।
HTML और JavaScript कोड कैसे काम करता है
सबसे पहले, हम कुछ HTML एलिमेंट्स परिभाषित करते हैं, एक इनपुट फील्ड, और एक बटन। फिर हम JavaScript का उपयोग करके दो वेरिएबल्स बनाते हैं प्रत्येक एलिमेंट का रेफरेंस स्टोर करने के लिए input & button। अब हमारे पास प्रत्येक एलिमेंट को प्रोग्रामेटिकली मैनिपुलेट करने का पूर्ण नियंत्रण है।
हम बटन की स्थिति को डिसेबल करके शुरू करते हैं। डिफ़ॉल्ट रूप से, HTML में बटन की स्थिति इनेबल्ड होती है। disabled = true का उपयोग करके बटन अब UI में यूज़र के लिए ग्रे आउट (डिसेबल्ड) है।
फिर हम input वेरिएबल में change इवेंट प्रॉपर्टी के साथ एक इवेंट हैंडलर (addEventListener) अटैच करते हैं, जो एक प्रॉपर्टी है जो इंटरैक्शन के लिए सुनती (देखती) है। इस मामले में, हम जानना चाहते हैं कि यूज़र इनपुट फील्ड के साथ टाइप करके कब इंटरैक्ट करता है, और फिर उस इवेंट पर प्रतिक्रिया करने के लिए एक फ़ंक्शन चलाते हैं।
हम जो फ़ंक्शन चलाते हैं उसे stateHandler कहा जाता है और यह हर बार फायर होता है जब इनपुट फील्ड के अंदर कोई बदलाव होता है।
stateHandler के अंदर कोड कहता है "यदि इनपुट फील्ड का वैल्यू एक खाली स्ट्रिंग है (=== '') तो बटन को डिसेबल करें, अन्यथा (else) इसे इनेबल करें।"
