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


อบรมสร้างเว็บไซต์ขายของด้วย Joomla 3.2

ป้ายรับอบมรม ทำเว็บไซต์ ขายของด้วย Joomla
* เข้าสู่ระบบ    * สมัครสมาชิก   * FAQ




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

ลงทะเบียนเมื่อ: 18/04/2012 10:39 am
โพสต์: 2651
เราสามารถทำตัวเพิ่ม ลบ 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   ตอบกลับ   แสดง   โพสต์ล่าสุด 
ติดปัญหาการเขียน PHP JavaScript ทำใบสั่่งสินค้า ช่วยด้วยคะ
โดย askask » 19/08/2014 8:18 pm

1 ตอบกลับ

28 แสดง

โพสต์ล่าสุด โดย tsukasaz ดูข้อความล่าสุด
20/08/2014 11:22 am
Programming - PHP

มีปัญหาการใช้ Dropdown ของ Bootstrap
โดย GunnerMan » 19/08/2014 3:11 pm

0 ตอบกลับ

16 แสดง

โพสต์ล่าสุด โดย GunnerMan ดูข้อความล่าสุด
19/08/2014 3:11 pm
ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM

การอ่านไฟล์ .csv ในการแสดงผลข้อมูลที่เป็นภาษาไทย
โดย jay_limm » 16/08/2014 5:44 pm

0 ตอบกลับ

59 แสดง

โพสต์ล่าสุด โดย jay_limm ดูข้อความล่าสุด
16/08/2014 5:44 pm
Programming - PHP

การพัฒนา phpBB : การสร้าง ไฟล์ .XML
โดย thatsawan » 30/05/2014 12:42 am

1 ตอบกลับ

403 แสดง

โพสต์ล่าสุด โดย น่าสนใจ ดูข้อความล่าสุด
08/08/2014 5:05 pm
Programming - PHP

การติดตั้ง Line PC บน Ubuntu 14.04.1 Desktop 64bit
โดย tsukasaz » 15/08/2014 3:42 pm

0 ตอบกลับ

76 แสดง

โพสต์ล่าสุด โดย tsukasaz ดูข้อความล่าสุด
15/08/2014 3:42 pm
Microsoft Office Knowledge & line & Etc


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

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