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

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

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

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

$(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

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

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

บทความแนะนำที่เกี่ยวข้อง
การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie	อ่าน 28,729
ทบทวนพื้นฐาน ajax ใน jquery การส่งค่าและแสดงข้อมูลเบื้องต้น	อ่าน 30,077
การใช้งาน CORS แก้ปัญหา Cross Domain Origin ใน Express	อ่าน 10,827

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 อาจจะไม่มีผล

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

หรือไม่ถ้ามีการเปลี่ยนค่าแล้ว บังคับให้เกิด event "change" ก็ลองใส่คำสั่ง trigger เพิ่มเข้าไปดู

$(".css_input_col1").eq(indexThis).val(data[0].code).trigger("change");

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

<!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

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

ไฟล์ ajax_simpledata2.php

<?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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน