How to stop a form from submitting when running barcode scanner

Question

I am trying to stop a form from submitting when using a barcode scanner to input text into the highlighted field. When I press the button on the scanner it automatically tries to submit using a higher precedence submit button in the form. I have tried to use an ignore function in javascript but can't find the key code value for the scanner. Is there a way to set the precedence of the different submit buttons without having to rearrange them? This is how I have the buttons set up in the code:

    <li>
        <cfinput type="submit" name="add" value="Enter Package">
    <cfinput type="submit" name="search" value="Search">                
    <cfinput type="submit" name="reset" value="Reset">
</li>
    </ul>       
</td>
<td>                
        <center><div id="labelImageDiv">
        <img id="labelImage" src="" alt="label preview"/>
    </div>
<ul>
        <li>
           <label for="printersSelect" class="left">Printer:</label>
        <select id="printersSelect" class="right"></select>
        <button id="printButton">Print</button>
    </li>
    <li>
    <div class="packHead">Package Pickup</div>                          
        <label for="pickup" class="left">Scan Barcode:</label>
        <div class="right">
        <cfinput type="text" name="pickup">
    </div>
    </li>
    <li>
    <div id="pickButton">
        <cfinput type="submit" name="pkgPickup" value="PickUp">
    </div>
    </li>
</ul>

Chagres

Where does the data from the scanned barcode go? – Transfigure

It's just scanning into a text box on the page so they don't have to type it in. – Chagres

Maybe add an onsubmit handler and see what the event.target was that triggered it. – Beauty

I would look into programming the barcode scanner as suggested below, however you can also just use a <button> and use JavaScript to submit the form When the button is physically clicked instead of an <input> Without a physical submit button the form will not submit when the barcode scanner or user presses the enter key – Dulci

Travis, this isn't entirely true. Chrome and Firefox (at least the newer versions, on Mac...only place I've tested...) will submit a form when enter is pressed in a text field, regardless of whether there is a submit button or not. So unless you are working exclusively in an environment where you know that the browsers being used will behave this way, the only reasonable solutions are 1.) block the submission with JavaScript or 2.) reprogram the scanner to not submit the return character with the scan. – Buehrer

@Buehrer You're right! I stand corrected, thanks! I haven't tried that in a while (like maybe back to IE5 or 6), is that new behavior? Could be I'm just remembering wrong. Either way, thanks. – Dulci

Answer 1

Most scanners allow you to program what characters are sent as part of the scan. You can usually find the scanner's model manual online, download it, and then scan the correct programming codes to get the scan to send through what you want.

Buehrer

Answer 2

Best solution I have found so far

$(":input").keypress(function(event){
    if (event.which == '10' || event.which == '13') {
        event.preventDefault();
    }
});

Kast

Answer 3

I voted for existdissolve's answer because the scanner should be configurable.

However, a very simple javascript solution would be to return false onSubmit unless the submit button is actually clicked allowing the form to be submitted. Something like this --

<script language="javascript">var p = false;</script>
<form method="post" onsubmit = "return(p)">
    <input type = "text" name = "text" />
    <input type = "submit" value = "submit" name = "submit" onClick = "javascript: p=true;" />
</form>

Dulci

Answer 4

If the scanner is feeding a textbox, start your form with your submit button hidden. Only show it once the textbox has data. This is done with javascript, not ColdFusion.

Transfigure

I think the scanner will still submit the form, though, as most are configured to send through the scanned text plus a return character. – Buehrer

Answer 5

Just add this HTML numeric filter!

<input type="text" id="bcvalue" name="barcodedata" value = "" onkeypress="return (event.charCode > 47 && event.charCode < 58)">

Worked great for my iPad asset control application!

Inheritance

tried this works but removes the dash - – Glycolysis

Answer 6

After spending lot of time, following solution worked for me.

Just add condition for entered input

<input type="text" id="bcvalue" name="barcodedata" value = "" onkeypress="return (event.key!='Enter')">

Mccay

Answer 7

Set the input type as button. Change it to submit after scanning is complete.

Maigre