Barcode reading values to textbox? - php

Question

I have a barcode scanner which reads the string of the barcode and displays in the active text box. also there is no consistent end character to the barcode, or standard length (I have 5 diffent length sizes. 16,17,18,19,20). I need to extract values from scanned data. so extracting values also depend on the barcode length.
So how would I go about firing a method when the WHOLE string has been read in?
Im using php and ajax to do this.
$(document).ready(function()
{
$("#bcode").focus();
//prevents autocomplete in some browsers
$("#bcode").attr('autocomplete', 'off').keyup(function(event)
{
var name = $("#bcode").val();
$("#status").empty();
if(name.length > 17 ) `// need to check all possible length values like this`
{
selectAll();
$("#status").html('<img align="absmiddle" src="images/loading.gif" /> Checking availability...').show();
$.ajax({
type: "POST",
url: "namecheck.php",
data : "bcode=" + name,
success: function(msg)
{
$("#status").html(msg).show();
}
});
}
else
{
$("#status").html('').addClass('err').show();
}
});
});

Answer 1

I did some work with a card swiper, there are similar challenges there. The data comes in a rapid burst, but there isn't a consistent "end-of-data" string being sent. The solution is to use setTimeout and wait - when the input stops, then you fire your processing code.
Depending on your hardware, the amount of waiting you'll want to do varies. Experiment with this code, to adjust the wait time, simply adjust the duration argument of setTimeout. I've started it on 500ms - that works pretty well for the card swipers. Forgive me if there are any minor wobbles in my code here - I am not a jQuery guy :)
$(document).ready(function() {
$("#bcode")
.focus()
.attr('autocomplete', 'off')
.keyup(function(event){
// if the timer is set, clear it
if (barcode_watch_timer !== false)
clearTimeout(barcode_watch_timer);
// set the timer to wait 500ms for more input
barcode_watch_timer = setTimeout(function () {
process_barcode_input();
}, 500);
// optionally show a status message
//$("#status").html('waiting for more input...').show();
// return false so the form doesn't submit if the char is equal to "enter"
return false;
});
});
var barcode_watch_timer = false;
function process_barcode_input() {
// if the timer is set, clear it
if (barcode_watch_timer !== false)
clearTimeout(barcode_watch_timer);
// grab the value, lock and empty the field
var name = $("#bcode").val();
$("#bcode").attr('disabled', true);
// empty the status message
$("#status").empty();
// add a loading message
$("#status").html('<img align="absmiddle" src="images/loading.gif" /> Checking availability...').show();
// send the ajax request
$.ajax({
type: "POST",
url: "namecheck.php",
data : "bcode=" + name,
success: function(msg) {
// unlock the field, show a success status
$("#bcode").attr('disabled', false);
$("#status").html(msg).show();
}
});
}

Answer 2

Does it need to be a text area?
The last barcode reader I used always ended with a newline. If you are inputing into a <input type="text"/> the return char will likely try to submit the form, and you can use an onSubmit to capture the event and process your input.

Answer 3

Try observe the field with code by interval
Example
setInterval(function() {
var value = $("#code").val(),
prev_value = $("#code").attr("prev_value");
if (prev_value == value) {// compare with prevent value for detecting canges
console.log("value is not changed");
return;
}
//if (value.length < 17) {
//exeption
// or reset value $("#code").val(prev_value);
//return;
//}
if (value[value.length-1] == "\n") {// check last symbol
console.log(value);// Do something with you code eg send by AJAX
}
$("#code").attr("prev_value", value); // save current value for compare later
}, 1000 );