带有条形码扫描器

时间:2017-01-06 19:27:23

标签: javascript php jquery html forms

我知道条码扫描器只是在每次扫描后发送键码13的另一个键盘,我有一个非常简单的表单只有一个输入字段,我希望能够扫描多个条码并点击提交到POST数据。我想我会需要一个javascript,但我对javascripts不好。

最终结果看起来像这样。您可以看到已扫描多个条形码,它们显示在图片的底部。

目标是在不触摸键盘的情况下扫描所需数量的条形码,完成扫描后,只需单击鼠标即可按下提交按钮。当我点击提交时,他们应该发布到另一个页面。

enter image description here

我相信对于擅长javascript的人来说,这是一件简单的事情。

这是HTML表单代码。

<form action="myform5.php" method="post">
   <p>First name: <input type="text" name="serial" /></p>
   <input type="submit" name="submit" value="Submit" />
</form>

我的问题是如何让它按照我上面描述的那样做?

提前致谢。

1 个答案:

答案 0 :(得分:1)

这应该有用。

&#13;
&#13;
var codes = "";
var codes_el = document.getElementById('codes');
var output_el = document.getElementById('output');

function process_key(event){
  
  var letter = event.key;
  
  if (letter === 'Enter'){
    event.preventDefault();
    letter = "\n";
    event.target.value = "";
  }
  
  // match numbers and letters for barcode
  if (letter.match(/^[a-z0-9]$/gi)){
    codes += letter;
  }
  
  
  codes_el.value = codes;
  output_el.innerHTML = codes;
}
&#13;
<form method="POST" action="myform5.php">
  <input onkeydown="process_key(event)" />
  <input type="submit" value="Send" />
  <input type="hidden" name="codes" id="codes" />
</form>

<pre id="output">
</pre>
&#13;
&#13;
&#13;

然后你可以这样进入myform5.php

<?php
// codes will be a string of barcodes seperated by "\n"
$codes = $_POST['codes'];

// get as array like so
$barcodes = explode("\n", $codes);

// build up string of barcodes
$barcode_str = "";
$prefix = '';
foreach ($barcodes as $barcode){
    $barcode_str .= $prefix . "'" . $barcode . "'";
    $prefix = ', ';
}

$query = "select * from hdds where serial IN (" . $barcode_str . ");";

/* do things with query here */

// once your done processing
// redirect the user back to the form page
header("Location: FormPage.html");
?>

我假设您的条形码是数据库中的字符串。

所以你必须在查询中包装每个条形码。