Mindphp.com เว็บ สอนสร้างเว็บไซต์ ฐานข้อมูล php Javascript Ajax Jquery Html CSS CMS CRM และ เว็บเซอเวอร์ Hosting Web Server สอน Joomla phpbb
(New Look)
หน้าเว็บบอร์ด » Webboard » Programming - PHP » PHP Knowledge » การ เพิ่ม/ลบ Text Box ด้วย jQuery

* เข้าสู่ระบบ    * สมัครสมาชิก   * FAQ    * ค้นหา




โพสต์กระทู้ใหม่ กลับไปยังกระทู้  [ 3 โพสต์ ] 
เจ้าของ ข้อความ
 หัวข้อกระทู้: การ เพิ่ม/ลบ Text Box ด้วย jQuery
โพสต์โพสต์แล้ว: 25/05/2012 5:31 pm 
ออฟไลน์
PHP Super Hero Member
PHP Super Hero Member
ภาพประจำตัวสมาชิก

ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์: 967
เราสามารถทำตัวเพิ่ม ลบ 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/


รายงานในข้อความ
 ข้อมูลส่วนตัว  E-mail  
ตอบกลับพร้อมอ้างอิง  
โพสต์โพสต์แล้ว: 24/12/2012 10:08 am 
ถ้าหากเราต้องการเอาลงสู่ฐานข้อมูลละครับ ต้องเขียนโค๊ดยังไงต่อหรอคับ ช่วยทีครับ ขอบคุณครับ


รายงานในข้อความ
ข้างบน  
  
ตอบกลับพร้อมอ้างอิง  
โพสต์โพสต์แล้ว: 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]')");
}
?>


รายงานในข้อความ
ข้างบน  
  
ตอบกลับพร้อมอ้างอิง  
แสดงโพสจาก:  เรียงตาม  
โพสต์กระทู้ใหม่ กลับไปยังกระทู้  [ 3 โพสต์ ] 

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

เขตเวลา GMT + 7 ชั่วโมง

การ เพิ่ม/ลบ Text Box ด้วย jQuery   ตอบกลับ   แสดง   โพสต์ล่าสุด 
ต้องการดึงข้อมูลจาก website ครับ
โดย conan_j » 18/05/2013 10:08 pm

0 ตอบกลับ

26 แสดง

โพสต์ล่าสุด โดย conan_j ดูข้อความล่าสุด
18/05/2013 10:08 pm
Programming - PHP

สอบถามโค้ดyoutube และส่งค่าการค้นคีย์เวอร์แล้วให้แสดงลิงค์ ที่youtubeและ google
โดย monchai.lek » 17/05/2013 3:39 pm

0 ตอบกลับ

51 แสดง

โพสต์ล่าสุด โดย monchai.lek ดูข้อความล่าสุด
17/05/2013 3:39 pm
Programming - PHP

ทำรายการสั่งซื้อไม่ได้ค่ะ
ไฟล์แนบ โดย p_id21 » 15/05/2013 3:15 pm

0 ตอบกลับ

54 แสดง

โพสต์ล่าสุด โดย p_id21 ดูข้อความล่าสุด
15/05/2013 3:15 pm
phpBB3, SMF, Joomla, Wordpress, CMS CRM

phpbb ขอตัวอย่างการส่งค่า แล้ว if หน่อยคับ
โดย Herollnu » 15/05/2013 2:51 pm

1 ตอบกลับ

121 แสดง

โพสต์ล่าสุด โดย sangon ดูข้อความล่าสุด
16/05/2013 9:52 am
Programming - PHP

phpbb3 ติดปัญหาการซ้อนลูป
โดย sangon » 15/05/2013 11:59 am

2 ตอบกลับ

74 แสดง

โพสต์ล่าสุด โดย mindphp ดูข้อความล่าสุด
15/05/2013 1:23 pm
phpBB3, SMF, Joomla, Wordpress, CMS CRM


ท่าน สามารถ โพสกระทู้ในบอร์ดนี้ได้
ท่าน สามารถ ตอบกระทู้ในบอร์ดนี้ได้
ท่าน ไม่สามารถ แก้ไขโพสของท่านในบอร์ดนี้ได้
ท่าน ไม่สามารถ ลบโพสของท่านในบอร์ดนี้ได้
ท่าน ไม่สามารถ แนบไฟล์ในบอร์ดนี้ได้

ค้นหาสำหรับ:
ไปที่:  
Powered by phpBB® Forum Software © phpBB Group
Thai language by Mindphp.com & phpBBThailand.com
[ Time : 0.350s | 13 Queries | GZIP : On ]