ต้องการทำฟังชั่น autofill จากบาร์โค้ด

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ต้องการทำฟังชั่น autofill จากบาร์โค้ด

ต้องการทำฟังชั่น autofill จากบาร์โค้ด
ต้องการทำฟังชั่น auto fill ข้อมูลจากบาร์โค้ดจากรหัสคลัง ถ้าเจอข้อมูลให้ Enter (Cross Browser) ไปที่ input รหัสสินค้า แต่ถ้าไม่เจอบาร์โค้ดคลังให้ Enter (Cross Browser) กลับมาอยู่ที่รหัสคลังครับ ส่วนรหัสสินค้าถ้า ถ้าเจอให้ submit form ถ้าไม่เจอให้ enter กลับมาอยู่ที่ input รหัสสินค้าครับ
ผมทำ autofill ตรวจสอบรหัสได้ทั้งสองช่องแล้วแต่ Enter (Cross Browser) ไม่ยอมไป หรือหาไม่เจอก็กลับไปบรรทัดอื่น รบกวนช่วยหน่อยนะครับ

<script type="text/javascript">
        $(function nextbox(id) {
            $(".css_input_col1").on("change", function () {
                var data_1 = $(this).val();
                var indexThis = $(".css_input_col1").index(this);
                $.getJSON("searching_location.php?id=" + data_1, function (data) { // คืนค่าตัวแปร data เป็น json object
                    $("#place_show_return").html(JSON.stringify(data));
                    if (data != null && data.length > 0) { // ถ้ามีข้อมูล
                        $(".css_input_col1").eq(indexThis).val(data[0].code);
                    } else {
                        alert("ไม่เจอข้อมูลบาร์โค้ด Location");
                        $(".css_input_col1").eq(indexThis).val(data[0]);
                    }
                });
            });
 
            $(".css_input_col2").on("change", function () {
                var data_1 = $(this).val();
                var indexThis = $(".css_input_col2").index(this);
                $.getJSON("searching_product.php?id=" + data_1, function (data) { // คืนค่าตัวแปร data เป็น json object
                    $("#place_show_return").html(JSON.stringify(data));
                    if (data != null && data.length > 0) { // ถ้ามีข้อมูล
                        $(".css_input_col2").eq(indexThis).val(data[0].code);
                        $(".css_input_col3").eq(indexThis).val(data[0].detail);
                    } else {
                        alert("ไม่เจอข้อมูลบาร์โค้ดสินค้า");
                        $(".css_input_col2").eq(indexThis).val(data[0]);
                        $(".css_input_col3").eq(indexThis).val(data[0]);
                    }
                });
            });
        });


Prapan Thaweeravong 17-07-2020 17:20:12

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ไม่เข้าใจที่ถามเท่าไหร่ คงแนะนำได้เพียง ลอง debug เช็คผ่าน console


บทความแนะนำที่เกี่ยวข้อง
การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ieอ่าน 29,716
ทบทวนพื้นฐาน ajax ใน jquery การส่งค่าและแสดงข้อมูลเบื้องต้นอ่าน 31,177
การใช้งาน CORS แก้ปัญหา Cross Domain Origin ใน Expressอ่าน 11,478
ninenik 18-07-2020
 ความคิดเห็นที่ 2

อารมประมาณว่าใคร เครื่องยิงบาร์โค้ดใน input text แล้วตรวจสอบถามบาร์โค้ดนั้นมีข้อมูลในฐาน ก็  Enter (Cross Browser) ไป input text ต่อไป

แต่ถ้าเครื่องยิงบาร์โค้ด ยิงบาร์โค้ดแล้วไม่เจอข้อมูลในฐานก็ให้  Enter (Cross Browser) อยู่ที่ input เดิมอะครับ



Prapan Thaweeravong 18-07-2020 09:03
 ความคิดเห็นที่ 3
ที่ใช้อยู่น่าจะถูกแล้ว แต่ก็ต้องปรับ logic เงือนไขเองให้้ถูกต้อง
ลองเพิ่ม event "input" เพิ่มเข้าไป เพราะเป็นกรณียิงค่าจากบาร์ code บางครั้ง change อาจจะไม่มีผล

1
.on("input change", function () {

หรือไม่ถ้ามีการเปลี่ยนค่าแล้ว บังคับให้เกิด event "change" ก็ลองใส่คำสั่ง trigger เพิ่มเข้าไปดู
 
1
$(".css_input_col1").eq(indexThis).val(data[0].code).trigger("change");


หรือจะลองเอาตัวอย่างนี้ไปเป็นแนวทางดูก็ได้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
</head>
<body>
  
<br>
<br>
<div class="container">
  <input type="text" name="input1"><button name="barcode" type="button">Test Barcode</button>
  <br>
  <input type="text" name="input2">
</div>
   
         
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
   // จำลองการยิงบาร์โค้ด
    $("[name=barcode]").on("click", function(){
        $("[name=input1]").val(randomData()).trigger("change");
    });
     
    $("[name=input1]").on("input change", async function(){
      var inputValue = $("[name=input1]").val();
      var resData = await $.getJSON("ajax_simpledata.php?checkvalue="+inputValue);
      if (resData != null && resData[0] == true) { // ถ้ามีข้อมูล
        console.log("Have Data");
        $("[name=input2]").val(inputValue).trigger("change");
        $("[name=input1]").val("");    
      }else{
        console.log("No Data");
        $("[name=input2]").val("");    
      }
      console.log(resData);
    });   
     
    $("[name=input2]").on("input change", async function(){
      var inputValue = $("[name=input2]").val();
      var resData = await $.getJSON("ajax_simpledata2.php?checkvalue="+inputValue);
      if (resData != null && resData[0] != null) { // ถ้ามีข้อมูล
        console.log("Have Data");
        console.log(resData[0]);
      }else{
        console.log("No Data");
        $("[name=input2]").val("");    
        $("[name=input1]").val(inputValue);    
      }
      console.log(resData);
    });    
     
    function randomData(){
      var a = [111,222,333,444,555,666];
      var key = Math.floor((Math.random() * 5) + 1);
      return a[key];
    }
      
});
</script>
</body>
</html>


ไฟล์ ajax_simpledata.php

1
2
3
4
5
6
7
<?php
$a = [111,222,333,444]; // ข้อมูลบาร์โค้ด
$result = array(
    in_array($_GET['checkvalue'],$a)
);
echo json_encode($result);
?>


ไฟล์ ajax_simpledata2.php

1
2
3
4
5
6
7
8
9
10
11
<?php
$a = [444]; //
$productID = NULL;
if(in_array($_GET['checkvalue'],$a)){
    $productID = $_GET['checkvalue'];
}
$result = array(
    $productID
);
echo json_encode($result);
?>


DEMO ด้านล่าง ไม่เกี่ยวกับโค้ดตัวอย่างด้านบน เป็นแค่แนวทางคล้ายๆ กัน

ตัวอย่าง DEMO

Ninenik 18-07-2020
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ