PHP POS系统扫码添加错误：无对应商品时添加同前缀商品求修复

问题根源 #

1. 当前使用<select>控件接收条码，浏览器默认会自动匹配以输入内容开头的选项而非完全匹配，这是下拉框的原生特性，导致无对应条码时仍会选中相似商品。
2. 全局监听document的input事件触发自动提交，没有针对条码做有效性校验，直接提交了错误选项。

分步修复方案 #

1. 替换下拉框为纯输入框（适配扫码场景） #

将原有的<select>替换为文本输入框，避免浏览器自动匹配行为，同时生成商品条码与ID的映射用于校验：

<form action="incoming.php" method="post" id="barcodeForm">
  <input type="hidden" name="pt" value="<?php echo $_GET['id']; ?>" />
  <input type="hidden" name="invoice" value="<?php echo $_GET['invoice']; ?>" />
  <!-- 新增隐藏域存储商品ID，提交时赋值 -->
  <input type="hidden" name="product" id="productId" />
  
  <!-- 文本输入框接收条码 -->
  <input type="text" id="barcodeInput" placeholder="扫描商品条码" autocomplete="off" style="width: 650px;" required autofocus>
  
  <input type="number" name="qty" value="1" min="1" placeholder="Qty" autocomplete="off" style="width: 68px; height:30px; padding-top:6px; padding-bottom: 4px; margin-right: 4px; font-size:15px;" required>
             
  <button type="submit" class="btn btn-info" style="width: 123px; height:35px; margin-top:-5px;"><i class="icon-plus-sign icon-large"></i> Add</button>
</form>

<!-- 生成商品条码与ID的映射JSON，用于前端校验 -->
<script type="text/javascript">
const productMap = {
  <?php
  include('../connect.php');
  $sql = "SELECT product_id, product_code FROM products";
  $result = $db->query($sql);
  $items = [];
  if ($result->rowCount() > 0) {
    while ($row = $result->fetch()) {
      $items[] = "'{$row['product_code']}': '{$row['product_id']}'";
    }
  }
  echo implode(', ', $items);
  ?>
};
</script>

2. 修改自动提交逻辑，添加前端校验 #

移除全局input监听，只针对条码输入框做监听，并在提交前校验条码是否存在：

<script>
const barcodeForm = document.getElementById('barcodeForm');
const barcodeInput = document.getElementById('barcodeInput');
const productIdInput = document.getElementById('productId');
let submissionTimeout;

// 监听条码输入框的输入事件
barcodeInput.addEventListener('input', () => {
  clearTimeout(submissionTimeout);
  submissionTimeout = setTimeout(() => {
    const barcode = barcodeInput.value.trim();
    // 校验条码是否存在
    if (productMap[barcode]) {
      productIdInput.value = productMap[barcode];
      barcodeForm.submit();
    } else {
      alert('该条码对应的商品不存在，请检查！');
      barcodeInput.focus();
    }
  }, 500);
});

// 阻止表单默认提交，确保走校验逻辑
barcodeForm.addEventListener('submit', (e) => {
  const barcode = barcodeInput.value.trim();
  if (!productMap[barcode]) {
    e.preventDefault();
    alert('该条码对应的商品不存在，请检查！');
    barcodeInput.focus();
  }
});
</script>

3. 后端二次校验（关键，防止前端绕过） #

在incoming.php中添加商品存在性校验，确保即使前端校验被绕过，后端也能拦截错误数据：

<?php
include('../connect.php');

$productId = $_POST['product'] ?? '';

// 校验商品是否存在
$stmt = $db->prepare("SELECT * FROM products WHERE product_id = ?");
$stmt->execute([$productId]);
if ($stmt->rowCount() === 0) {
  // 商品不存在，返回错误提示并跳转回销售页
  echo "<script>alert('商品不存在'); window.location.href='sales.php?id=" . $_POST['pt'] . "&invoice=" . $_POST['invoice'] . "';</script>";
  exit;
}

// 后续的添加商品至销售单逻辑...
?>

额外优化建议 #

• 扫码枪通常会在输入结束后发送回车键，可监听条码输入框的keydown事件捕获回车键，直接触发校验提交：

  barcodeInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const barcode = barcodeInput.value.trim();
      if (productMap[barcode]) {
        productIdInput.value = productMap[barcode];
        barcodeForm.submit();
      } else {
        alert('该条码对应的商品不存在，请检查！');
        barcodeInput.focus();
      }
    }
  });
  

内容的提问来源于stack exchange，提问作者mahdi jomaa