来自条形码扫描仪的具有多个值的简单 HTML 表单输入字段

Question

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

最终结果看起来像这样。 您可以看到多个条码已被扫描，它们出现在图片的底部。

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

我相信这对于擅长 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>

我的问题是如何让它做我上面描述的事情？

提前致谢。

Answer 1

这应该有效。

 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; }

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

然后你可以像这样进入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");
?>

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

因此，您必须将查询中的每个条形码包装起来。