BARCODE Reader and JavaScript

19 Jun

Barcode reader is a common tool used for different type of authentication. Recently I worked in Event management software for a local community. They are going to provide a membership card with a barcode and on the Event venue they want to use it for authentication.

There are some interactive barcode reader that can read the code and put it where your computer is focused and interesting thing is the barcode reader add an ENTER KEY STROCK after putting the coderin the focused field.

I completed the work really in an easy way. I used HTML, JAVASCRIPT and XML . But there are some small issues I want to share with you because first time I fall in a trap with JavaScript. When barcode scanner reader the code and put it in the focused input box then it become difficult to track it with JavaScript event tracker like “onblur”, “onchage” , “onfocus” etc.

It is easy to solve the problem if we put input box in a <form> element because barcode press an enter after reading the code i.e. it submit the form after retrieving the code. See the following code.

<form onsubmit = “return ini()”>

<input type=”text” id=”code_read_box” value=”” />

</form>

So, each time function “ini()” got called when the barcode complete the scan and put the code. Now we can use the following JavaScript function to get the code:

function ini()
{

// Retrieve the code
var code =document.getElementById (‘code_read_box’).value;

// Return false to prevent the form to submit
return false;

}

I used MOTOROLA LS-2208 as a barcode scanner and it worked fine.

About these ads

29 Responses to “BARCODE Reader and JavaScript”

  1. Junal June 19, 2008 at 4:18 pm #

    Great….hope more are on the way :)

  2. Rubel June 19, 2008 at 8:29 pm #

    :)

  3. Barcode reader July 17, 2008 at 1:17 pm #

    thanks for the tip it was helpfull

  4. Shantanu May 9, 2009 at 8:29 am #

    Is Bar code reader used with web application?
    Bcoz we are stuck in between whether to develop window application or web application

  5. Rubel May 9, 2009 at 12:36 pm #

    Yes. It can be develop in web application.

    I recommend 28 bit bar code for your reader.

  6. Shantanu May 11, 2009 at 4:36 am #

    Thanks for ur reply
    One more thing
    If i have my web application opened and focused is on the text box,reader directly read and put it on text box???

    Any special coding or Active X required on web application?

  7. Rubel May 11, 2009 at 5:30 am #

    No. You don’t need any extra coding or Active-X control.

    Some USB barcode reader can fill the code in to a focused input element like text box. If you configure the reader it can also press an enter at end of the process.

  8. Shantanu May 11, 2009 at 6:16 am #

    this will helpful to us
    Thanks a lot

  9. Apijay July 27, 2009 at 8:15 pm #

    Rubel if cud please mail d detail of the project …it wud b a gr8 help….

  10. Rubel July 28, 2009 at 3:08 am #

    Hey Apijay what’s your email address??

  11. wilch September 3, 2009 at 2:09 pm #

    hi Gregorio,

    i saw your jQuery code, could you help me more on how to proceed in using it to read barcodes on my php webapp.

  12. Gregorio September 5, 2009 at 7:50 pm #

    Sure Wilch, you can recive support to my jQuery plugin BarcodeListener (http://code.google.com/p/jquery-barcodelistener/) from the disccusion group (http://groups.google.com/group/jquery-barcodelistener?pli=1). I will help you!

    Greg

  13. Cornelis Sven February 2, 2010 at 1:46 pm #

    Is there a software install needed for the barcode reader MOTOROLA LS-2208

    Or is it just plug and play, and javascript code is doing the right actions?

  14. Théo Carranza March 2, 2010 at 3:45 pm #

    This is how I did it, using jquery and ajax

    //c_barra is the field wich takes the barcode reader output

    // JavaScript Document
    $(document).ready( function(){
    $(‘#c_barra’).focus();
    $(‘#c_barra’).keypress( function(e){
    if(e.keyCode==13){
    $(‘#conteudo’).attr(‘src’, ‘contagem.php?c_barra=’+$(‘#c_barra’).val());
    $(‘#c_barra’).val(”);
    }
    })

    })

    I listen to the keypress event, and if the keycode = 13 (13 is the code for enter) it does the ajax call, then clears the field.

    Hope someone finds it useful.

  15. nilesh April 21, 2010 at 10:08 am #

    Can I get the barcode value without focusing on an edit box ?

    • Rubel April 21, 2010 at 10:21 am #

      Actually it depends on your bar code reader that you are using. Most of the reader place the code in a field that is focused.

      But, I am not sure where you are trying to receive the response code.

  16. nilesh April 21, 2010 at 10:38 am #

    Thanks for the response.
    Sorry if I was not clear,
    Lets say I have a webpage. The user scan the barcode. Without having textbox to focus, can I capture the barcode value in javascript for showing up related informations ?

    • Rubel April 21, 2010 at 11:07 am #

      You can not do that because without focus you can not write in a web page.
      What can you do is.. Set opacity to zero or hide it in your page with CSS. Capture the value on submit of a form (Best Practice).

  17. nilesh April 21, 2010 at 1:25 pm #

    Thanks. Do you have an example for this ?

    • Rubel April 29, 2010 at 9:51 am #

      Please the example in the post

  18. nilesh April 21, 2010 at 2:10 pm #

    Few queries in your example.
    1) How do I focus on the hidden input control ?
    2) Which value do I retrive in form submit ?
    Kindly update

  19. John May 6, 2010 at 10:02 pm #

    Hi guys, I also have a Symbol (Motorola) LS2208 and am trying to use it in a web app. I need to scan a barcode and have the data go into a particular text box in my web app. I have tried Gregorio’s JQuery plugin, but the problem there is that the enter key is needed to execute his script. However, if I have the scanner press enter after inputting the barcode info it tries to submit the form. (I can’t have this). Can anyone please help?

    • Rubel May 7, 2010 at 12:26 am #

      @John,
      You can configure your scanner to prevent it, to add enter press(Carriage Return) after transferring the data in a particular input box. You might have a manual with some special bar code. The scanner read any of them to change it’s mode.

      You can also prevent the form submission with Java Script like

  20. sasi September 12, 2010 at 5:05 am #

    Hi Rubel,

    Am new to barcode readers ., Can you tell me how do i interact with barcode reader from the javascript .,
    Do i need to intantiate any activex object in javascript ?
    can u send me an sample project please ?

    Thanks in advance,
    Sasi

  21. chanchal December 7, 2011 at 5:58 am #

    Hi Friends,

    I am developing web app,I want to add barcode reader in it and save that into database,can anybody give me advice to develop it..

  22. hawah March 21, 2012 at 11:58 am #

    good stuff.

  23. Mohammad Nadeem July 27, 2012 at 4:25 pm #

    I would really appreciate if you could post the code which actually reads the barcode from barcode reader, or you can send me an email (coolmind182006@gmail.com) with example

    • Mohammad Nadeem August 19, 2012 at 3:57 pm #

      Ahh I learned it, We can do it in couple of ways

      1) Most of the barcode readers, can be configured to put the read code in the focused text field. No extra ActiveX Object coding required.

      2) Barcode reader should be configured to output some header characters ( and most scanners do it), Jquery Barcode listener somehow captures those codes and provide us the call back.

      3) Working with Raw, getUserMedia() method,

  24. Jenny March 11, 2013 at 2:49 pm #

    Pretty section of content. I just stumbled upon your website and in accession capital
    to assert that I get actually enjoyed account your blog posts.
    Anyway I will be subscribing to your feeds and even I achievement you access consistently rapidly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: