জাভাস্ক্রিপ্ট দিয়ে বাটন ইনেবল/ডিজেবল করা (স্টেট ভিত্তিক)

ইনপুট ফিল্ড খালি কিনা সেটি ভিত্তিক করে বাটন ইনেবল বা ডিজেবল করার পদ্ধতি শিখুন।

যখন আপনি ওয়েবে ফর্ম ফিল আপ করেন তখন আপনি লক্ষ্য করবেন যে প্রায়শই আপনি ফর্ম সাবমিট করতে পারেন না যতক্ষণ না সকল বা কিছু টেক্সট ফিল্ড পূরণ হয় (রিকোয়ার্ড ফিল্ড)। একই nguyênনিয়ম চেকবক্স এবং রেডিও বাটনের জন্যও প্রযোজ্য।

এখানে আপনার বাটনের স্টেট (ইনেবল vs ডিজেবল) কন্ট্রোল করার পদ্ধতি দেওয়া আছে আপনার ইনপুট ফিল্ড খালি কিনা সেটি ভিত্তিক করে।

HTML

নিচের HTML আপনার এডিটরে যোগ করুন:

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

জাভাস্ক্রিপ্ট

নিচের জাভাস্ক্রিপ্ট যোগ করুন

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 এবং জাভাস্ক্রিপ্ট কোড কীভাবে কাজ করে

প্রথমে, আমরা কয়েকটি HTML এলিমেন্ট ডিফাইন করি, একটি ইনপুট ফিল্ড এবং একটি বাটন। তারপর জাভাস্ক্রিপ্ট ব্যবহার করে দুটি ভেরিয়েবল তৈরি করি প্রতিটি এলিমেন্টের রেফারেন্স সংরক্ষণের জন্য input & button। এখন আমাদের পূর্ণ কন্ট্রোল আছে প্রতিটি এলিমেন্ট প্রোগ্রামেটিক্যালি ম্যানিপুলেট করার।

আমরা বাটনের স্টেট ডিজেবল করে শুরু করি। ডিফল্টভাবে, HTML-এ একটি বাটনের স্টেট ইনেবল। disabled = true ব্যবহার করে বাটনটি এখন ইউজারের জন্য UI-এ গ্রে আউট (ডিজেবল) হয়ে গেছে।

তারপর আমরা একটি ইভেন্ট হ্যান্ডলার (addEventListener) আট্যাচ করি input ভেরিয়েবলের সাথে change ইভেন্ট প্রোপার্টি দিয়ে, যা একটি প্রোপার্টি যা এলিমেন্টের সাথে ইন্টারঅ্যাকশন শুনে (ওয়াচ করে)। এই কেসে, আমরা জানতে চাই যখন ইউজার ইনপুট ফিল্ডের সাথে ইন্টারঅ্যাক্ট করে টাইপ করে, এবং সেটি রিয়্যাক্ট করে একটি ফাংশন রান করে।

আমরা যে ফাংশন রান করি সেটি stateHandler নামে এবং এটি ফায়ার করে 때마다 ইনপুট ফিল্ডে পরিবর্তন হলে।

stateHandler-র ভিতরের কোড বলে "যদি ইনপুট ফিল্ডের ভ্যালু খালি স্ট্রিং হয় (=== '') তবে বাটন ডিজেবল করো, অন্যথায় (else) ইনেবল করো।"