|
 |
| |
อยากเพิ่มตัว select option ในหมวดหมู่เดียวกันไปเรื่อยๆ เมื่อมีการกดปุ่มบวก |
| |
 |
|
|
 |
 |
|
กรณีที่มันอยู่ในลูป พอกดปุ่ม + มันจะเพิ่มไปทุกรายการเลยครับ ทำยังไงให้เพิ่มเฉพาะรายการที่เราคลิก
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> <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>
<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 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
บรรทัด 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> <button class="remove_field"> - </button></div>'); //add input box
}
});
}
|
ประวัติการแก้ไข
2020-04-11 20:17:05
| |
|
|
| |
| Date :
2020-04-11 20:06:34 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณครับ ถามต่ออีกนิดถ้าตรง select ที่สร้างมาใหม่ต้องการดึงมาจากฐานข้อมูล จะเขียนประมาณไหนครับ
|
| |
|
|
| |
| Date :
2020-04-12 06:42:36 |
By :
giverplus |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
JS ติดต่อ DB ไม่ได้(ถ้าไม่ใช่ Node.js) เลี่ยงโดยทำ AJAX หรือ merge กับ server side script(ในที่นี้คือ PHP) ครับ
|
| |
|
|
| |
| Date :
2020-04-12 11:42:54 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เลี่ยงโดยทำ AJAX <= พอจะเขียนเป็นแนวทางให้ได้มั้ยครับ
|
| |
|
|
| |
| Date :
2020-04-12 18:43:03 |
By :
giverplus |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
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>
<button class="remove_field"> - </button>
</div>`); //add input box
}
});
}
});
}
|
| |
|
|
| |
| Date :
2020-04-12 19:54:22 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
