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

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

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

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 11606
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 25/05/2012 5:31 pm

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

Code: Select all

<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

Code: Select all

<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/
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

jaiponge@gmail.com

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

Post by jaiponge@gmail.com » 24/12/2012 10:08 am

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

น่าจะ

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

Post by น่าจะ » 25/12/2012 12:54 am

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

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

Code: Select all

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 มาครอบ

Code: Select all

<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 ข้อมูลลงฐานข้อมูล

Code: Select all

<?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]')");
}
?>

User avatar
theone084
PHP Newbie
PHP Newbie
Posts: 1
Joined: 17/10/2013 3:57 pm

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

Post by theone084 » 17/10/2013 4:16 pm

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

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 131 guests