Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > อยากเพิ่มตัว select option ในหมวดหมู่เดียวกันไปเรื่อยๆ เมื่อมีการกดปุ่มบวก



 

อยากเพิ่มตัว select option ในหมวดหมู่เดียวกันไปเรื่อยๆ เมื่อมีการกดปุ่มบวก

 



Topic : 135105



โพสกระทู้ ( 45 )
บทความ ( 0 )



สถานะออฟไลน์




ตามรูปด้านซ้ายจะเป็นหมวดหมู่ ด้านขวาจะเป็นอุปกรณ์ย่อยอีกที อยากให้กดปุ่ม + แล้วเพิ่ม select option ขึ้นมาเพื่อเลือกอุปกรณ์ย่อยมาจากฐานข้อมูล ครับ

รูปประกอบ



Tag : PHP, MySQL, JavaScript







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-04-11 13:23:20 By : giverplus View : 1709 Reply : 8
 

 

No. 1



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

JavaScript ใช้เมธอด createElement() + appendChild() ครับ

https://www.w3schools.com/code/tryit.asp?filename=GDPV7PSAODWL

หน้าที่ความสวยงาม อยู่ที่ Style(CSS)






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-11 14:36:42 By : PhrayaDev
 


 

No. 2



โพสกระทู้ ( 45 )
บทความ ( 0 )



สถานะออฟไลน์


กรณีที่มันอยู่ในลูป พอกดปุ่ม + มันจะเพิ่มไปทุกรายการเลยครับ ทำยังไงให้เพิ่มเฉพาะรายการที่เราคลิก

รูปหลังจากกดบวก 1 ปุ่ม

Code (PHP)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
	var max_fields      = 10; //maximum input boxes allowed
	var wrapper   		= $(".input_fields_wrap"); //Fields wrapper
	var add_button      = $(".add_field_button"); //Add button ID
	
	var x = 1; //initlal text box count
	var clicks = document.getElementsByClassName('add_field_button');

for(i=0;i<clicks.length;i++){
	$(add_button[i]).click(function(e){ //on add input button click
		e.preventDefault();
		if(x < max_fields){ //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div><select name="part_fail[]" id="part_fail" class="pno_fail"><option value="">- - - ระบุ Part No. - - -</option><option value="Mainboard">Mainboard</option><option value="Power supply">Power supply</option></select>&nbsp;&nbsp;<button class="remove_field"> - </button></div>'); //add input box
		}
	});
}

	$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
		e.preventDefault(); $(this).parent('div').remove(); x--;
	})
});
</script>
</head>
<body>

<form class="form-horizontal" name="frm_finish" id="frm_finish" method="POST" action="" enctype="multipart/form-data">
<br /><br />
<table border="1" width="40%">
<thead>
	<tr>
		<th>equipment</th>
		<th>use</th>
	</tr>
</thead>
<tbody>
<?php
$sql2 = "SELECT * FROM equipment.stock_tb_kind ";
$query2 = Connect_DB($sql2) or die(mysql_error());
$num2 = mysql_num_rows($query2);
if($num2>0){
		while ($result = mysql_fetch_array($query2)) {
?>

<tr>
	<td>
		<input type="text" name="pno" id="pno" value="<?=$result['kindname'];?>">
	</td>
	<td>
		<div class="input_fields_wrap">    
			<div>
				<select name="part_fail[]" id="part_fail" class="pno_fail">
					<option value="">- - - ระบุ - - -</option>
<?php
$sql = Connect_DB("SELECT * FROM equipment.stock_tb_kind_type WHERE stock_tb_kind_type.kindid = '".$result['kindid']."' ");	
while($rs=mysql_fetch_array($sql)){
?>
	<option value="<?=$rs['kindtypeid'];?>"><?=$rs['kindtypename'];?></option>
<?php
}
?>
				</select>
					&nbsp;&nbsp;<button class="add_field_button">+</button>
			</div>
		</div>
	</td>
</tr>

<?php
		}
}
?>
</tbody>
</table>
<br /><br />
<button type="submit" id="upload" name="upload" class="btn btn-success"><i class="icon-ok icon-white" style="vertical-align:middle"></i> บันทึก</button>
</form>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-11 16:50:02 By : giverplus
 

 

No. 3



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

บรรทัด 56 ใส่ (dynamic/unique) id ให้มันก่อน

Code (PHP)
//$duid อาจใช้เป็น counter
<div id="<?= $duid ?>" class="input_fields_wrap">


ใน loop
Code (JavaScript)
            for (i = 0; i < clicks.length; i++) {
                $(add_button[i]).click(function(e) { //on add input button click	 
                    e.preventDefault();
                    var id=$(this).parent().parent(".input_fields_wrap").attr('id');
                    var len = $(this).siblings().andSelf().length;
                    if (len <= max_fields) {
                        $("#" + id + ".input_fields_wrap").append('<div><select name="part_fail[]" id="part_fail" class="pno_fail"><option value="">- - - ระบุ Part No. - - -</option><option value="Mainboard">Mainboard</option><option value="Power supply">Power supply</option></select>&nbsp;&nbsp;<button class="remove_field"> - </button></div>'); //add input box
                    }
                });
            }



ประวัติการแก้ไข
2020-04-11 20:17:05
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-11 20:06:34 By : PhrayaDev
 


 

No. 4



โพสกระทู้ ( 45 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ ถามต่ออีกนิดถ้าตรง select ที่สร้างมาใหม่ต้องการดึงมาจากฐานข้อมูล จะเขียนประมาณไหนครับ

อยากเปลี่ยนเป็นดึงจากฐานข้อมูล
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-12 06:42:36 By : giverplus
 


 

No. 5



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

JS ติดต่อ DB ไม่ได้(ถ้าไม่ใช่ Node.js) เลี่ยงโดยทำ AJAX หรือ merge กับ server side script(ในที่นี้คือ PHP) ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-12 11:42:54 By : PhrayaDev
 


 

No. 6



โพสกระทู้ ( 45 )
บทความ ( 0 )



สถานะออฟไลน์


เลี่ยงโดยทำ AJAX <= พอจะเขียนเป็นแนวทางให้ได้มั้ยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-12 18:43:03 By : giverplus
 


 

No. 7



โพสกระทู้ ( 9,545 )
บทความ ( 2 )



สถานะออฟไลน์


Code (JavaScript)
for (i = 0; i < clicks.length; i++) {
	$(add_button[i]).click(function(e) { //on add input button click	 
		e.preventDefault();
		var id=$(this).parent().parent(".input_fields_wrap").attr('id');
		var len = $(this).siblings().andSelf().length;
		if (len <= max_fields) {
			// ajax request ไปยัง server
			$.ajax({ url: 'xxxx.php?xx=yy', dataType:'json', 
			error: (e,x)=>{},
			success: r=>{
				if(r.msg=='complete'){
					$("#" + id + ".input_fields_wrap").append(
					 `<div>
						<select name="part_fail[]" id="part_fail" class="pno_fail">
						<option value="">- - - ระบุ Part No. - - -</option>
						<option value="Mainboard">Mainboard</option>
						<option value="Power supply">Power supply</option>
						</select>&nbsp;&nbsp;
						<button class="remove_field"> - </button>
					</div>`); //add input box
				}
			});
		}
	});
}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-12 19:54:22 By : Chaidhanan
 


 

No. 8



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

concept พื้นฐาน
https://www.w3schools.com/php/php_ajax_database.asp

การใช้ jQuery
http://programmerblog.net/jquery-ajax-get-example-php-mysql/

จากนั้น นำความรู้มาประยุกต์ใช้ดูก่อนครับ ถ้ายังติดขัดค่อยว่ากันอีกที

Edit: คำตอบอยู่ด้านบนแล้ว


ประวัติการแก้ไข
2020-04-12 19:57:16
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-12 19:55:51 By : PhrayaDev
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : อยากเพิ่มตัว select option ในหมวดหมู่เดียวกันไปเรื่อยๆ เมื่อมีการกดปุ่มบวก
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่