নিচের project টি মূলত jQuery দিয়ে কিভাবে dynamic কাজ করা হয় তার একটি ধারনা মাত্র। এতে লক্ষ্য করে দেখুন Add, Remove Button এ 
click করার সাথে সাথে counter এর মান বৃদ্ধি পাচ্ছে এবং নতুন object Add অথবা Remove হচ্ছে। এখানে text input box এর html code concate করে text input box এর group তৈরী করা হয়েছে। পূনাঙ্গ html div element তৈরীর জন্য createElement() function ব্যবহার করা হয়েছে।
project Code :
[sourcecode language=”js”]
<html>
<head>
<title>jQuery add/remove textbox example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement(‘div’))
.attr("id", ‘TextBoxDiv’ + counter);
newTextBoxDiv.after().html(‘<label>Textbox #’+ counter + ‘ : </label>’ + ‘<input type="text" name="textbox’ + counter +
‘" id="textbox’ + counter + ‘" value="" >’);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter–;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = ”;
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $(‘#textbox’ + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id=’TextBoxesGroup’>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type=’textbox’ id=’textbox1′ >
</div>
</div>
<input type=’button’ value=’Add Button’ id=’addButton’>
<input type=’button’ value=’Remove Button’ id=’removeButton’>
<input type=’button’ value=’Get TextBox Value’ id=’getButtonValue’>
</body>
</html>
[/sourcecode]
Click Me to Show Demo
………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”
খুবই সুন্দর টিউটোরিয়াল আর ডেমো প্রোজেক্টের মাধ্যমে বুঝানোর জন্য ধন্যবাদ।
মাহবুব ভাই, আপনার maximum tutorial গুলতে কেমন যেন একটা বাংলা বাংলা ভাব আর বেশ পেঁচানো মনে হয়, jQuery tutorial টির মধ্যে এধরনের কোন problem নেই । এটির e-book বের হলে আশা করি অনেক জনপ্রিয়তা পাবে। কারন আজ পর্যন্ত আমি বাংলা jQuery এর সম্পূর্ন tutorial কোথাও পাইনি, তাছাড়া এর লেখায় বেশ অলংকার রয়েছে।
ই-বুক তৈরী করা হবে ইনশাল্লাহ।
আর প্রতিটি ব্যক্তিই স্বতন্ত্র বৈশিষ্ট্যের অধিকারী। 🙂