Simple HTML form input field with multiple values from barcode scanner

Question

I know barcode scanner is just another keyboard that sends keycode 13 after every scan, I have a very simple form with just one input field, I want to be able to scan multiple barcodes and click submit to POST data. I think I would would need a javascript for this, but I am no good with javascripts.

The end result would look something like this. You can see multiple barcodes have been scanned and they appear at the bottom of the picture.

The goal is to scan desired number of barcodes without touching the keyboard, when done scanning press the submit button with the click of mouse. When I click submit they should be posted to another page.

I am sure this is a simple thing for someone who is good at javascript.

Here is the HTML form code.

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

My question is how I can make it do what I described above?

Thanks in advance.

Answer 1

This should work.

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>

Then you can get in myform5.php like so:

<?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");
?>

I assume your barcodes are strings in the DB.

So you have to wrap each of the barcodes in the query.