โปรแกรมเมอร์กากกาก

วิธีทำ jQuery dynamic textbox  หรือการใช้ jQuery add และ remove textbox

 <style type="text/css">//ในส่วนของ Css
div{
padding:8px;
}
</style>
เป็น Css ควบคุมเล็กน้อย เราสามารถนำไปแก้ไขได้ เพื่อความสวยงาม ตามใจท่านสำหรับในส่วนนี้

- ในส่วน
<script type="text/javascript">  //ส่วนของ jquery script

$(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="" ><label>Text #'+ counter + ' : </label>' +
      '<input type="text" name="text' + counter + 
      '" id="text' + counter + '" value="" ><label>select #'+ counter + ' : </label>' +
   '<select id="select'+counter+'"><option value="1">เงินในกระเป๋า</option><option value="2">เงินในบัญชี</option></select>');

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>

เป็นการเขียน script function Jquery เรียกใช้งาน  โดยการคลิก ซึ่งมีการเขียนเมื่อคลิก id addButtonก็จะทำการเพิ่ม Textbox มาให้ ต่างๆเหล่านี้ สามารถศึกษาได้จาก ที่ทำสีไว้ให้นะครับ

- และส่วนสุดท้ายก็จะเชื่อโยกกับส่วน script function Jquery อย่างที่ได้กล่าวไปแล้วเบื่้องต้น

<div id='TextBoxesGroup'> //การนำมาใช้งานกับการคลิกต่างๆ
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' value="" >
        <label>Text #1 : </label><input type='textbox' id='text1' value="" >
        <label>select #1 : </label>
    <select id="select1">
    <option value="1">เงินในกระเป๋า</option>
     <option value="1">เงินในบัญชี</option>
    </select>
</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'>

และสุดท้ายก็หวังว่าบทความนี้จะเป็นประโยชน์ต่อท่านไม่มากก็น้อยครับ  สำหรับโปรแกรมเมอร์กากกาก ก็ของจบบทความนี้ลงเพียงเท่านี้

ปล. เครดิต :  www.mkyong.com    และสามารถรันและดูต้นฉบับที่โปรแกรมเมอร์กากกาก นำมาดัดแปลงได้ที่  http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

                      PHP | VB | HTML | Javascript | JQuery | SQL | Computer | CSS| IT