How to read barcode image as input onsubmit

Question

I have two form input elements as a class [1] and my jQuery [2].

What I want: two barcodes (DataMatrix symbology); one representing true and one representing false (or yes and no). When a barcode input is scanned, something happens depending on which one was scanned.

Multiple permutations of this code fail.

Observation: the focused input barcode image will be what the scanner submits not the scanned image. With the existing code, one will see that I'm bringing the class into focus (forced), which always brings the second form input into focus - the focus is important because the scanner is not sending the scanned image. If I scan the first form input, the handler thinks I scanned the second input.

So, either I need to find a way to intercept the scan to focus on the actual scanned input, or I need to find a whole different method for accomplishing the task.

The short answer is how can I scan a barcode input? What the barcode data is is irrelevant. What's important is the actual input field that is tied to what the barcode means IE a barcode means "Yes" and is tied to ID "barcode_true" and the other means "No" and is tied to ID "barcode_false". Hopefully, that makes sense.

[1] My html (relevant snippet):

<div class="barcodes">
 <form id="answer_form">
  <div id="answer_boxes" class="hidden">
   <div style='float:left;display:inline-block'>
    <div style='text-align:center'>
     <input class="barcode_button" type="image" src="/path/to/barcode1.png" id="barcode_true" />
     <h2><span style="width: 50%">Yes</span></h2>
    </div>
   </div>

   <div style='float:right'>
    <div style='text-align:center'>
     <input class="barcode_button" type="image" src="/path/to/barcode2.png" id="barcode_false" />
     <h2><span style="width: 50%">No</span></h2>
    </div>
   </div>
  </div>
 </div>

[2] My js:

var myDialog =  $('.barcodes').dialog(
{   
    title: title,
    modal:true,
    width:'1200',
    height:'350',
    resizable: false,
    closeOnEscape: true,
    position: 'center',
    draggable: false,
    open : function() // some styling being done here...
           {   
               $('#answer_boxes').show();

               $('.barcode_button').focus().on({
                   blur:  function(e)
                          {   
                              console.log('regaining focus!');
                              $(this).focus();
                          },  
                   click: function(e)
                          {   
                              e.preventDefault();
                              var ans_id = $(this).attr('id');

console.log('ON: ' + $(this).attr('id')); // always the focused input not the scanned one.
                              if ( ans_id == 'barcode_true' )
                              {   
console.log('CLICK YES');
                                  // do  something here
                              }   

                              if ( ans_id == 'barcode_false' )
                              {   
console.log('CLICK NO');
                                  e.preventDefault();
                                  // do  something here
                              }   
                          }});
           },  
    beforeClose:
        function()
        {   
console.log('CLOSING!');
            reset_form();
        },  
    });
};  

EDIT

The closest I've come to getting the functionality I desire is having a text input box available for the scanned input to be placed. When the scanner scans it automatically "presses" enter so I'm able to read the scanned input from the handler. The thing is if I use this method, I don't want the user to see the input field form, but if the form is not displayed it no worky. I was going to attempt to overlay the barcode image over the input field but my css skills blow. So maybe that's the route to go?

Answer 1

If I understood correctly (but that's a big if):

• Your page is being analyzed by a scanner.
• The scanner will simulate a click on an area where it recognized whatever barcode.
• For some reason it will also simulate an enter key press.
• You want your page to react to this click+enter according to where the scanner simulated the click

If all this is correct, your code seems overcomplicated to me. You could simply create two image buttons with your barcodes and react on the click event, like so:

<button type="button" onClick="scanner_chose_yes();">
    <img src="barcode_yes.png">
</button>
<button type="button" onClick="scanner_chose_no ();">
    <img src="barcode_no.png" >
</button>

Or am I missing something?