MooTools-এ ফর্ম ইভেন্টস (Form Events) হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। আপনি onSubmit এবং onChange ইভেন্টগুলো MooTools এর addEvent মেথড ব্যবহার করে সুনির্দিষ্ট ফর্ম উপাদানগুলিতে অ্যাটাচ করতে পারেন। এই ইভেন্টগুলির মাধ্যমে আপনি ফর্মের সাবমিশন বা কোনো ইনপুটের পরিবর্তন অনুসরণ করতে পারেন এবং বিভিন্ন কার্যকলাপ পরিচালনা করতে পারেন যেমন ফর্ম ভ্যালিডেশন, ডেটা সংগ্রহ ইত্যাদি।
এখানে আমরা onSubmit এবং onChange ইভেন্ট হ্যান্ডল করার উদাহরণ দেখাবো।
1. onSubmit ইভেন্ট হ্যান্ডল করা
onSubmit ইভেন্ট ফর্ম সাবমিশন হলে ট্রিগার হয়। আপনি ফর্ম সাবমিশনের আগে কিছু কার্যকলাপ করতে চাইলে এটি ব্যবহার করতে পারেন, যেমন ফর্ম ভ্যালিডেশন।
উদাহরণ: ফর্ম সাবমিশন ব্লক করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools onSubmit Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// ফর্ম সিলেক্ট করা
var form = document.id('myForm');
// onSubmit ইভেন্ট হ্যান্ডল করা
form.addEvent('submit', function(event) {
event.preventDefault(); // ফর্ম সাবমিশন রোধ করা
// ফর্মের ডেটা প্রদর্শন
var name = document.id('name').get('value');
var email = document.id('email').get('value');
console.log('Name:', name);
console.log('Email:', email);
// ফর্ম জমা দেওয়া হলে কিছু কার্যকলাপ
alert('ফর্ম সাবমিট করা হয়েছে!');
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">নাম:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">সাবমিট</button>
</form>
</body>
</html>
এখানে:
event.preventDefault()ব্যবহার করা হয়েছে যাতে ফর্মটি সাবমিট না হয় এবং আমরা ফর্মের ডেটা প্রক্রিয়া করতে পারি।- ফর্মের ইনপুট ভ্যালু গুলি
get('value')মেথডের মাধ্যমে সংগ্রহ করা হয়েছে। - ফর্ম সাবমিশনের পর কিছু কার্যকলাপ (যেমন, একটি অ্যালার্ট) প্রদর্শন করা হয়েছে।
2. onChange ইভেন্ট হ্যান্ডল করা
onChange ইভেন্ট ফর্ম ইনপুটের মান পরিবর্তন হলে ট্রিগার হয়। এটি ফর্মের ইনপুট (যেমন টেক্সট বক্স, চেকবক্স, ড্রপডাউন ইত্যাদি) পরিবর্তিত হলে কিছু কাজ করার জন্য ব্যবহৃত হয়।
উদাহরণ: ইনপুট পরিবর্তন হলে কিছু কার্যকলাপ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools onChange Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// ইনপুট ফিল্ড সিলেক্ট করা
var inputField = document.id('name');
// onChange ইভেন্ট হ্যান্ডল করা
inputField.addEvent('change', function() {
var name = inputField.get('value');
console.log('ইনপুট পরিবর্তন হয়েছে:', name);
// ইনপুট পরিবর্তন হলে কিছু কার্যকলাপ
alert('নাম ইনপুট পরিবর্তন হয়েছে!');
});
});
</script>
</head>
<body>
<form>
<label for="name">নাম:</label>
<input type="text" id="name" name="name"><br><br>
<button type="submit">সাবমিট</button>
</form>
</body>
</html>
এখানে:
addEvent('change', function())দ্বারাonChangeইভেন্ট হ্যান্ডল করা হয়েছে, যা ইনপুট ফিল্ডের মান পরিবর্তন হলে ট্রিগার হবে।get('value')দিয়ে ইনপুট ফিল্ডের মান সংগ্রহ করা হয়েছে এবংalert()ফাংশনের মাধ্যমে ব্যবহারকারীকে ইনপুট পরিবর্তনের জন্য সতর্ক করা হয়েছে।
3. onSubmit এবং onChange একসাথে ব্যবহার করা
একই ফর্মে onSubmit এবং onChange ইভেন্ট একসাথে ব্যবহার করতে পারেন, যাতে ফর্ম সাবমিশনের সময় কিছু ভ্যালিডেশন করা যায় এবং ইনপুট ফিল্ডের পরিবর্তনও ট্র্যাক করা যায়।
উদাহরণ: ফর্ম ভ্যালিডেশন ও ইনপুট পরিবর্তন ট্র্যাক করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Form Events Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var form = document.id('myForm');
// onSubmit ইভেন্ট হ্যান্ডল করা
form.addEvent('submit', function(event) {
event.preventDefault(); // ফর্ম সাবমিট বন্ধ করা
var name = document.id('name').get('value');
var email = document.id('email').get('value');
// ফর্ম ভ্যালিডেশন
if (name === '' || email === '') {
alert('অনুগ্রহ করে সব ফিল্ড পূর্ণ করুন!');
} else {
alert('ফর্ম সফলভাবে সাবমিট হয়েছে!');
}
});
// onChange ইভেন্ট হ্যান্ডল করা
var inputField = document.id('name');
inputField.addEvent('change', function() {
var name = inputField.get('value');
console.log('নাম ইনপুট পরিবর্তন হয়েছে:', name);
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">নাম:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">সাবমিট</button>
</form>
</body>
</html>
এখানে:
onSubmitইভেন্টের মাধ্যমে ফর্ম ভ্যালিডেশন করা হচ্ছে। যদি কোনো ইনপুট ফিল্ড খালি থাকে, তবে সাবমিশন রোধ করা হচ্ছে।onChangeইভেন্টের মাধ্যমে ইনপুট ফিল্ডের মান পরিবর্তন হলে তা লগ করা হচ্ছে।
সারাংশ
MooTools-এ ফর্ম ইভেন্টস হ্যান্ডল করা খুবই সহজ। onSubmit এবং onChange ইভেন্টগুলি ব্যবহার করে আপনি ফর্ম সাবমিশন এবং ইনপুট পরিবর্তন ট্র্যাক করতে পারেন। MooTools এর addEvent মেথডের মাধ্যমে এই ইভেন্টগুলি অ্যাটাচ করা যায় এবং এর মাধ্যমে ফর্ম ভ্যালিডেশন, ইনপুট ট্র্যাকিং এবং অন্যান্য কার্যকলাপ সহজে করা সম্ভব।
Read more
