Databases
StackOverflow2013
Postsdbo
POhow to read barcode image as input onsubmit
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to read barcode image as input onsubmit
    text
    copied!<p>I have two form input elements as a class [1] and my jquery [2]. </p> <p>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.</p> <p>Multiple permutations of this code fail. </p> <p>Obsveration: the <em>focused</em> input barcode image will be what the scanner submits <em>not</em> 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. </p> <p>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. </p> <p>The short answer is how can I scan a barcode input? What the barcode data <em>is</em> 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.</p> <p>[1] My html (relevant snippet):</p> <pre><code>&lt;div class="barcodes"&gt; &lt;form id="answer_form"&gt; &lt;div id="answer_boxes" class="hidden"&gt; &lt;div style='float:left;display:inline-block'&gt; &lt;div style='text-align:center'&gt; &lt;input class="barcode_button" type="image" src="/path/to/barcode1.png" id="barcode_true" /&gt; &lt;h2&gt;&lt;span style="width: 50%"&gt;Yes&lt;/span&gt;&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style='float:right'&gt; &lt;div style='text-align:center'&gt; &lt;input class="barcode_button" type="image" src="/path/to/barcode2.png" id="barcode_false" /&gt; &lt;h2&gt;&lt;span style="width: 50%"&gt;No&lt;/span&gt;&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>[2] My js:</p> <pre><code>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(); }, }); }; </code></pre> <p><strong>EDIT</strong></p> <p>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?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload