जावास्क्रिप्ट के साथ बटन को कैसे सक्षम और अक्षम करें (राज्य के आधार पर)

इनपुट फ़ील्ड खाली है या नहीं, इसके आधार पर बटन को अक्षम या सक्षम करने का तरीका जानें।

जब आप वेब पर फ़ॉर्म भरते हैं तो आप देखेंगे कि अक्सर आप फ़ॉर्म को तब तक सबमिट नहीं कर सकते जब तक कि सभी या कुछ टेक्स्ट फ़ील्ड (आवश्यक फ़ील्ड) नहीं भर जाते। चेकबॉक्स और रेडियो बटन पर भी यही सिद्धांत लागू होता है।

आपका इनपुट फ़ील्ड खाली है या नहीं, इसके आधार पर अपने बटन (सक्षम बनाम अक्षम) की स्थिति को नियंत्रित करने का तरीका यहां दिया गया है।

एचटीएमएल

अपने संपादक में निम्न HTML जोड़ें:

<input class="input" type="text" placeholder="fill me" />
<button class="button">Click Me</button>

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 तत्वों, एक इनपुट फ़ील्ड और एक बटन को परिभाषित करते हैं। फिर हम प्रत्येक तत्व input . के संदर्भ को संग्रहीत करने के लिए दो चर बनाने के लिए जावास्क्रिप्ट का उपयोग करते हैं &button . अब हमारे पास प्रत्येक तत्व को प्रोग्रामेटिक रूप से हेरफेर करने का पूरा नियंत्रण है।

हम बटन की स्थिति को अक्षम करके शुरू करते हैं। डिफ़ॉल्ट रूप से, एक बटन की स्थिति सक्षम होती है एचटीएमएल में। disabled = true . का उपयोग करके उपयोगकर्ता के लिए UI में बटन अब धूसर (अक्षम) हो गया है।

फिर हम एक ईवेंट हैंडलर संलग्न करते हैं (addEventListener ) से input घटना संपत्ति के साथ चर change , जो एक संपत्ति है जो तत्वों के साथ बातचीत के लिए सुनती है (देखती है)। इस मामले में, हम जानना चाहते हैं कि उपयोगकर्ता कब इनपुट फ़ील्ड के साथ इंटरैक्ट करता है, और फिर फ़ंक्शन चलाकर उस ईवेंट पर प्रतिक्रिया करता है।

हमारे द्वारा चलाए जाने वाले फ़ंक्शन को stateHandler . कहा जाता है और हर बार इनपुट फ़ील्ड में कोई परिवर्तन होने पर यह सक्रिय हो जाता है।

StateHandler के अंदर का कोड कहता है "यदि इनपुट फ़ील्ड का मान एक खाली स्ट्रिंग है (=== '' ) फिर बटन को अक्षम करें, अन्यथा (else ) इसे सक्षम करें।