2. PHPRunner General questions
  3. Parse Barcode String After Scanning
This topic is locked

Parse Barcode String After Scanning

 		4/11/2024 9:42:21 PM
PHPRunner General questions
C
 copper21 author

Hello,

I am looking to see if this is possible.

I would like to scan a QR code on the add page and right after the QR code is scanned, I would like for javascript or other automatic way to parse the data that is scanned.

Example. On the add page, I have a field called QRCode. The focus is set on the QRCode field. When I scan a QR Code, the text that appears in the field is "ABC012345:TUSWI-99988852155". I would like to strip all of the string away except the 012345 part. Once the extra part of the string is stripped away, I will then set focus to another field to complete this task again.

Is this possible? Any help would be appreicated.

I am looking at all of the Javascript Event control events, but I am not finding anything.

Thank you in advance,

Brian
M
 		Mark Kramer 4/29/2024

You can achieve this functionality using JavaScript. Here's a basic example of how you can do it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<script>
 window.onload = function() {
 var qrCodeField = document.getElementById('qrCode');
 qrCodeField.focus();

 qrCodeField.addEventListener('input', function() {
 var qrData = qrCodeField.value;
 var parsedData = parseQRCode(qrData);
 if (parsedData !== null) {
 qrCodeField.value = parsedData;
 // Set focus to another field here
 }
 });

 function parseQRCode(data) {
 // Assuming the format "ABC012345:TUSWI-99988852155"
 var regex = /ABC(\d+):/;
 var match = data.match(regex);
 if (match) {
 return match[1]; // Return only the digits part
 } else {
 return null; // Return null if no match
 }
 }
 };
</script>
</head>
<body>
 <label for="qrCode">Scan QR Code:</label>
 <input type="text" id="qrCode" name="qrCode">
</body>
</html>
In this example:
  • The JavaScript code listens for the input event on the QR code input field.
  • When the event is triggered (e.g., when you scan a QR code into the input field), it calls the parseQRCode function to extract the relevant part of the data.
  • The parseQRCode function uses a regular expression to match the pattern "ABC012345:" and extracts the digits part.
  • If a match is found, it returns the extracted digits; otherwise, it returns null.
  • The extracted digits are then set as the value of the input field. You can add additional logic to set focus to another field after parsing the QR code.

Hope that puts you on the right track.