การ เพิ่ม/ลบ Text Box ด้วย jQuery

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 3344
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

การ เพิ่ม/ลบ Text Box ด้วย jQuery

โพสต์โดย tsukasaz » 25/05/2012 5:31 pm

เราสามารถทำตัวเพิ่ม ลบ Textbox ด้วย jQuery 1.7.2 โดยใส่โค้ด javascript ตามตัวอย่างครับ

โค้ด: เลือกทั้งหมด

<script type="text/javascript">
 
jQuery(document).ready(function(){
   
   // ตั้งค่าเริ่มต้นจำนวนถัดไปของ Textbox
   var counter = 2;
 
   // เมื่อคลิกปุ่ม Add Button
   jQuery("#addButton").click(function () {

      // ตรวจสอบว่ามี Textbox มากกว่า 10 หรือไม่ ถ้ามากกว่า่ให้แจ้งกล่องข้อความ
      // Textbox ไม่ให้เกิน 10
      if(counter>10){
         alert("Only 10 textboxes allow");
         return false;
      }   
     
      // ถ้า Textbox ยังไม่ถึง 10 ให้สร้าง Textbox ขึ้นมา
      jQuery('#TextBoxesGroup').append('<div id="TextBoxDiv' + counter + '">');
      jQuery('#TextBoxesGroup').append('<label>Textbox #' + counter + ' : </label>');
      jQuery('#TextBoxesGroup').append('<input type="text" name="key[]" id="key[]" /></div>');
     
      // เพิ่มค่าของจำนวน Textbox
      counter++;
   });
 
   // เมื่อคลิกปุ่ม Remove Button
   jQuery("#removeButton").click(function () {
      // ถ้าค่าจำนวนถัดไปของ Textbox เท่ากับ 1 ให้แจ้งข้อความเตือน
      if(counter==1){
         alert("No more textbox to remove");
         return false;
      }   
     
      // แต่ถ้าจำนวนยังไม่เท่ากับ 1 ให้ลดค่าลงไป 1
      counter--;
 
      // ลบ Textbox โดยอ้างอิงจาก ID ของแท็ก Div ที่มี Textbox อยู่ภายใน
      jQuery("#TextBoxDiv" + counter).remove();
   });

   // เมื่อคลิกปุ่ม Get TextBox Value
   jQuery("#getButtonValue").click(function () {
     
      // สร้างตัวแปรสำหรับเก็บค่าของ TextBox แต่ละตัว
      var msg = '';

      // วนรอบเก็บค่าของ TextBox แต่ละตัวไว้ที่ตัวแปร
      for(i=1; i<counter; i++){
         msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
      }

      // แสดงค่าที่อยู่ใน TextBox แต่ละตัว
      alert(msg);
   });

});
</script>


และส่วนของโค้ด html

โค้ด: เลือกทั้งหมด

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


ดูตัวอย่างได้ที่ http://www.mkyong.com/jquery/how-to-add ... th-jquery/
รูปภาพ

jaiponge@gmail.com

Re: การ เพิ่ม/ลบ Text Box ด้วย jQuery

โพสต์โดย jaiponge@gmail.com » 24/12/2012 10:08 am

ถ้าหากเราต้องการเอาลงสู่ฐานข้อมูลละครับ ต้องเขียนโค๊ดยังไงต่อหรอคับ ช่วยทีครับ ขอบคุณครับ

น่าจะ

Re: การ เพิ่ม/ลบ Text Box ด้วย jQuery

โพสต์โดย น่าจะ » 25/12/2012 12:54 am

ตัวอย่างสำหรับนำไปใส่ในฐานข้อมูลนะครับ

สมมุติว่าโครงสร้างตารางเป็นแบบนี้

โค้ด: เลือกทั้งหมด

CREATE TABLE IF NOT EXISTS `test` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `key` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;


เอา form มาครอบ

โค้ด: เลือกทั้งหมด

<form name="frm" method="post" action="save.php">
    <div id='TextBoxesGroup'>
       <div id="TextBoxDiv1">
          <label>Textbox #1 : </label><input type='text' name="key[]" 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'>
    <input type="submit" value="save" />
</form>


หน้าที่จะ insert ข้อมูลลงฐานข้อมูล

โค้ด: เลือกทั้งหมด


<?php
mysql_connect
('localhost', 'root', '') or die('not connect db');
mysql_query('set names utf8');
mysql_select_db('test') or die('not select db');

$key = $_POST['key'];
for(
$i = 0, $loop = count($key); $i < $loop; $i++) {
     mysql_query("INSERT INTO test VALUES ('','$key[$i]')");
}
?>

ภาพประจำตัวสมาชิก
theone084
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 17/10/2013 3:57 pm

Re: การ เพิ่ม/ลบ Text Box ด้วย jQuery

โพสต์โดย theone084 » 17/10/2013 4:16 pm

ลองทำแล้วไม่ยอมเพิ่มให้ งง อ่ะ เพราะไร


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน