<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>
//$duid อาจใช้เป็น counter <div id="<?= $duid ?>" class="input_fields_wrap">
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 } }); }
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 } }); } }); }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
