Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > สอบถามเรื่อง jQuery มาทำ AutoFill ข้อมูล Textbox + เพิ่มแถวลบแถวหน่อยครับ

สอบถามเรื่อง jQuery มาทำ AutoFill ข้อมูล Textbox + เพิ่มแถวลบแถวหน่อยครับ

เริ่มหัวข้อใหม่

PACKLpk

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

ตอนนี้ jQuery มาทำ AutoFill ข้อมูล Textbox + เพิ่มแถวลบแถว แล้วแต่ทำได้แถวแรกแถวเดียว พอแถว 2,3,4 ก็ดึงข้อมูลมาหาจากแถวแรกมา
พอลบแล้วใส่รหัสบาร์โค้ดอื่นแล้วก็ไม่ได้ ไม่มีอะไรเกิดขึ้นเลย ตอนนี้อยากให้เพิ่มแถวแล้วเป็น text ว่างๆ แล้ว AutoFill ข้อมูล Textbox เข้าไปได้

Code (PHP)

<!DOCTYPE html>
<?php
//require 'Session.php';
?>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $("#txtbarcode").change(function () {
                    $.ajax({
                        url: "returnDataPro.php",
                        type: "POST",
                        data: 'sCusID=' + $("#txtbarcode").val()
                    })
                            .success(function (result) {

                                var obj = jQuery.parseJSON(result);

                                if (obj == '')
                                {
                                    $('input[type=text]').val('');
                                } else
                                {
                                    $.each(obj, function (key, inval) {

                                        $("#txtbarcode").val(inval["Pro_barcode"]);
                                        $("#txtbrand").val(inval["Brand_name"]);
                                        $("#txtgen").val(inval["Gen_name"]);
                                        $("#txtcolor").val(inval["Pro_color"]);
                                        $("#txtlength").val(inval["Length_name"]);
                                        $("#txttype").val(inval["Type_name"]);
                                        $("#txt").val(inval["Pro_amountpacking"]);
                                    });
                                }

                            });
                });
            });
        </script>
    <form id="form1" name="form1" method="post" action="">
        <table id="myTbl" width="99%" border="1" cellspacing="2" cellpadding="0">
            <?php
            $all_id_data = "";
            echo $bar = '885303800';
            ?>   
            <tr>
                <th> <div align="center">รหัสบาร์ </div></th>
                <th> <div align="center">แบรนด์ </div></th>
                <th> <div align="center">รุ่น </div></th>
                <th> <div align="center">สี </div></th>
                <th> <div align="center">ยาว </div></th>
                <th> <div align="center">สาย </div></th>
                <th> <div align="center">จำนวน / ลัง</div></th>
                <th> <div align="center">จำนวน</div></th>
                <th> <div align="center">ลบ</div></th>
            </tr>
            <tr class="firstTr">
                <td><input type="text" name="txtbarcode" id="txtbarcode" style="width: 120px"></td>
                <td><input type="text" name="txtbrand" id="txtbrand" style="width: 120px" readonly/></td>
                <td><input type="text" name="txtgen" id="txtgen" style="width: 120px" readonly/></td>
                <td><input type="text" name="txtcolor" id="txtcolor" style="width: 120px" readonly/></td>
                <td><input type="text" name="txtlength" id="txtlength" style="width: 120px" readonly/></td>
                <td><input type="text" name="txttype" id="txttype" style="width: 120px" readonly/></td>
                <td><input type="text" name="txt" id="txt" value="" style="width: 120px" readonly/></td>
                <td><input type="text" name="txtamount" id="txtamount" style="width: 120px"></td>
                <td align="middle"><button onclick="javascript:doRemoveItem(this);">-</button></td>
            </tr>
        </table>
        <br/>
        <table width="500" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <button id="addRow" type="button">+</button>  
                    &nbsp;
                    <button id="removeRow" type="button">-</button>
                    &nbsp;
                    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#addRow").click(function () {
                // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
                // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
                // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
                $(".firstTr:eq(0)").clone(true)
                        .find("input").attr("value", "").end()
                        .find("select").attr("value", "").end()
                        .appendTo($("#myTbl"));
            });
            $("#removeRow").click(function () {
                // // ส่วนสำหรับการลบ 
                if ($("#myTbl tr").size() > 2) { // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
                    $("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
                } else {
                    // เหลือ 1 รายการลบไม่ได้
                    alert("ไม่อนุญาตให้ลบแถวที่เหลือนี้ได้");
                }
            });
        });
        function doRemoveItem(obj) {
            if ($('#myTbl tr').size() > 2) {
                if (confirm('คุณต้องการลบแถวนี้?'))
                    $(obj).parent().parent().remove();
            } else {
                alert('ไม่อนุญาตให้ลบแถวที่เหลือนี้ได้');
            }
        }
    </script>

ส่วนหน้าดึงข้อมูลก็เอามาจากต้นฉบับของ พี่วิน https://www.thaicreate.com/community/jquery-auto-fill-textbox.html ขอบคุณครับ

Tag : PHP

Date : 2017-10-05 15:49:57

By : PACKLpk

View : 1922

Reply : 8

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ทุกครั้งที่มีการ clone ก็ต้องสร้างการทำงาน autofill แทรกไปใน element ที่ clone ด้วยครับ
ฉนั้น txtbarcode ต้องเป็นแบบ dynamic ไม่ใช้ชื่อมันซ้ำกัน แปรผันตามจำนวนบรรทัดที่สร้างขึ้น
จริงๆ ส่วนตัวผมมองว่าการใช้งาน autofill มันเหมาะสำหรับแบบฟอร์มเดี่ยวๆ มันก็ควบคุมง่ายครับ

จาก ตย. มันเป็นการใช้ jquery ในการดึงค่ามาเติม ถ้าไม่แทรก script ทุกการ clone ผมก็นึกไม่ออกว่าทำแบบไหน
ลองเอาคำค้น "jquery autocomplete multiple rows" ไป search ใน google เพื่อจะเห็นอะไรดีดี

ประวัติการแก้ไข
2017-10-06 08:47:23
2017-10-06 08:47:36

Date : 2017-10-06 08:46:37

By : apisitp

No. 2

PACKLpk

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

ตอบความคิดเห็นที่ : 1 เขียนโดย : apisitp เมื่อวันที่ 2017-10-06 08:46:37

รายละเอียดของการตอบ ::

ตอนนี้ทำได้แบบว่าเพิ่มแถวต่อไปแล้วเป็น text ว่าง แล้วแต่ที่แถวต่อไปใส่บาร์โค้ดแล้วไม่เกิดอะไรขึ้น คิดว่านะจะเป็น txtbarcode ซ้ำกันใช่ไหมครับ ถ้ามีคำแนะนำดีๆ รบกวนแนะนำผมที่นะครับ ขอบคุณครับ

Date : 2017-10-06 09:21:51

By : PACKLpk

No. 3

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ตอบความคิดเห็นที่ : 2 เขียนโดย : PACKLpk เมื่อวันที่ 2017-10-06 09:21:51

รายละเอียดของการตอบ ::

...ก็ที่แนะนำไปไงครับ มันก็มีเท่านั้นจริงๆ

Date : 2017-10-06 10:08:13

By : apisitp

No. 4

PACKLpk

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

ตอบความคิดเห็นที่ : 3 เขียนโดย : apisitp เมื่อวันที่ 2017-10-06 10:08:13

รายละเอียดของการตอบ ::

รู้สึกจุกๆ

ยากเอาเรื่อง

Date : 2017-10-06 10:09:07

By : PACKLpk

No. 5

PACKLpk

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

ตอบความคิดเห็นที่ : 3 เขียนโดย : apisitp เมื่อวันที่ 2017-10-06 10:08:13

รายละเอียดของการตอบ ::

คือผมไม่เข้าใจอะ ไปอ่านเจอ เหมือนกับเป็นการใส่ for เข้าไป อันนี้ใช่หรอป่าวครับ

Date : 2017-10-06 11:16:20

By : PACKLpk

No. 6

Krungsri

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

Clone มันจะเป็นการ Copy ทั้ง Element และ Value นั้น ๆ แต่มััันจะไม่ Clone Event ที่กำหนดไว้ต้องแต่แรก

ลองเปลียนเป็นการสร้าง Object และ กำหนด Event ให้มัน จากนั้นก็ Append ไปที่ table

Date : 2017-10-06 11:50:50

By : Krungsri

No. 7

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ตอบความคิดเห็นที่ : 5 เขียนโดย : PACKLpk เมื่อวันที่ 2017-10-06 11:16:20

รายละเอียดของการตอบ ::

... สรุป ยืนยันตามเดิม Autofill ไม่เหมาะกับการนำมาใช้แบบนี้ ถ้าไม่เข้าใจ jquery อย่างเพียงพอ..

Date : 2017-10-06 12:15:03

By : apisitp

No. 8

PACKLpk

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

ตอบความคิดเห็นที่ : 6 เขียนโดย : Krungsri เมื่อวันที่ 2017-10-06 11:50:50

รายละเอียดของการตอบ ::

พอจะมีkeyword ในการค้นหาหรือตัวอย่างไหมคับ

Date : 2017-10-06 13:06:36

By : PACKLpk

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามเรื่อง jQuery มาทำ AutoFill ข้อมูล Textbox + เพิ่มแถวลบแถวหน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก