Mindphp.com เว็บ สอนสร้างเว็บไซต์ เว็บเซอเวอร์ Hosting Web Server สอน Joomla phpbb
(New Look)
หน้าเว็บบอร์ด » Result Center » Share Knowledge » การ เพิ่ม/ลบ Text Box ด้วย jQuery
 

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




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

ลงทะเบียนเมื่อ: 18/04/2012 10:39 am
โพสต์: 2794
เราสามารถทำตัวเพิ่ม ลบ 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 11:08 am 
ถ้าหากเราต้องการเอาลงสู่ฐานข้อมูลละครับ ต้องเขียนโค๊ดยังไงต่อหรอคับ ช่วยทีครับ ขอบคุณครับ


ข้างบน  
  
 
โพสต์โพสต์แล้ว: 25/12/2012 1: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]')");
}
?>


ข้างบน  
  
 
โพสต์โพสต์แล้ว: 17/10/2013 5:16 pm 
ออฟไลน์
PHP Newbie
PHP Newbie
ภาพประจำตัวสมาชิก

ลงทะเบียนเมื่อ: 17/10/2013 4:57 pm
โพสต์: 1
ลองทำแล้วไม่ยอมเพิ่มให้ งง อ่ะ เพราะไร


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

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

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

การ เพิ่ม/ลบ Text Box ด้วย jQuery   ตอบกลับ   แสดง   โพสต์ล่าสุด 
การใช้งาน empty() ใน PHP5.5 ?
โดย chbbk » 20/10/2014 2:40 pm

0 ตอบกลับ

55 แสดง

โพสต์ล่าสุด โดย chbbk ดูข้อความล่าสุด
20/10/2014 2:40 pm
Programming - PHP

การใช้ CONCAT_WS
โดย offing » 17/10/2014 3:47 pm

0 ตอบกลับ

84 แสดง

โพสต์ล่าสุด โดย offing ดูข้อความล่าสุด
17/10/2014 3:47 pm
SQL Knowledge

การใช้ cross join
โดย offing » 17/10/2014 3:36 pm

0 ตอบกลับ

58 แสดง

โพสต์ล่าสุด โดย offing ดูข้อความล่าสุด
17/10/2014 3:36 pm
SQL Knowledge

แก้ปัญหา Firefox เปิดแล้ว หน้าจอดำ หลังการอัพเกรด เป็นเวอร์ชั่น 33
โดย mindphp » 17/10/2014 4:46 am

0 ตอบกลับ

482 แสดง

โพสต์ล่าสุด โดย mindphp ดูข้อความล่าสุด
17/10/2014 4:46 am
ถาม - ตอบ คอมพิวเตอร์

วิธีการเรียกใช้ jquery เบื้องต้น
โดย offing » 15/10/2014 4:27 pm

0 ตอบกลับ

79 แสดง

โพสต์ล่าสุด โดย offing ดูข้อความล่าสุด
15/10/2014 4:27 pm
Jquery & Ajax Knowledge


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

ไปที่:  
Powered by phpBB® Forum Software © phpBB Group
Thai language by Mindphp.com & phpBBThailand.com