Dynamically add/remove textbox

নিচের 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 :

<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>

Demo:

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।