jess chavez jess chavez - 2 months ago 27
jQuery Question

used barcode scanner function keyup executed twice

i have assigned each student a barcode in their IDs. and im using barcode scanner to scan their IDs to check their attendance. im using a keyup function but everytime i scanned the barcode in their ID the keyup function executed twice.

<script type="text/javascript">


function loaddelegates($barcode)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("getdel").innerHTML = this.responseText;
$("#barcode").focus();
}
};
xhttp.open("GET", "mealclient/" + $barcode, true);
xhttp.send();

}

$(function() {
$('#barcode').attr('maxlength','13');
$(document).on('keyup','#barcode',function(e) {
e.preventDefault();
if ($(this).val().length >= 13) {
loaddelegates($(this).val());
return false;
}
});
});






<div class="site-wrapper-inner">

<div class="cover-container">

<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">PITYLC</h3>
<nav>
<ul class="nav masthead-nav">
@foreach($meals as $meal)
<li class="active"><a href="#">{{$meal->date}}</a></li>
@endforeach
</ul>
</nav>
</div>
</div>
<img src="/img/COVER.png" class="img-responsive" alt="Responsive image">

<div class="inner cover" id = "getdel">
@foreach($meals as $meal)
<h1 class="cover-heading" style = "font-weight: Bold">{{strtoupper($meal->meal)}}</h1>
@endforeach
<div class="form-group">
<label style = "color: #e36c1d">BARCODE</label>
<input class="form-control" style="font-size:30px; color: #e36c1d" id = "barcode" autofocus>
</div>
<div class="form-group">
<label style = "color: #e36c1d">NAME</label>
<input class="form-control" style="font-size:30px; color: #e36c1d" >
</div>
<div class="form-group" >
<label style = "color: #e36c1d">ORGANIZATION</label>
<input class="form-control" style="font-size:30px; color: #e36c1d" >
</div>
<div class="form-group">
<label style = "color: #e36c1d">POSITION</label>
<input class="form-control" style="font-size:30px; color: #e36c1d">
</div>
<div class="form-group">
<label style = "color: #e36c1d">SCHOOL</label>
<input class="form-control" style="font-size:30px; color: #e36c1d">
</div>


</div>



</div>

</div>

</div>

Answer

I could imagine that the barcode reader is somehow simulating a key press, as you listen for keyup. Probably it simulates two keys - e.g. Ctrl + V would call your function twice.

To debug this issue I would recommend to add

var code = e.keyCode || e.which;
console.log(code);

at the very top of your keyup listener. Check the console output. So if the reader really simulates two keys at once you could certainly ignore one of both.

EDIT: As the OP wrote, 13 is shown up in the console additionally to another key code. 13 is the ASCII code for CR (carriage return).

So to ignore this key write:

$(document).on('keyup','#barcode',function(e) {
      e.preventDefault();
      var code = e.keyCode || e.which;
      if (code != 13 && $(this).val().length >= 13) {
          loaddelegates($(this).val());
          return false;
      }
});