HTML Form - Prevent Form Submission For Input Using Barcode Scanner that adds Enter (CR) Suffix

Question

I have a simple table with 2 text inputs and 2 non input cells and a script that runs when the first input field is modified which queries a database and then updates the other 3 cells in the same row. This works well when manually entering the serial numbers in the first cell/column, but we have now encountered an issue with users in the warehouse using a barcode scanner to scan the serial number barcodes. The scanner is hardcoded to enter a Enter (CR) Suffix after a successful scan, which in turn is submitting the form at the same time.

Ideally we would like to allow the script to run after the barcode has been scanned (similar to when users press tab to exit the input field) as it does a database lookup and adds a new table row, but prevent the form from being submitted as well as the user isn't ready to submit the form when scanning.

Here's my form/table setup:

 $(document).ready(function() { $("#addRow").click(function() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); // Find and remove selected table rows $("#shipmentItems").on("click", ".deleteRow", function() { $(this).closest('tr').remove(); }); }); $(document).ready(function() { $(document).on('change', '.form-control.serialNumber', function() { var serialNumber = $(this).val(); //console.log( recid ); // Create a reference to $(this) here: $this = $(this); ID = 'ABC123'; code = 'PC8765'; description = 'Acme Standard Widget'; $this.closest('tr').find('.form-control.assetID').val(ID); $this.closest('tr').children('.code').html(code); $this.closest('tr').children('.description').html(description); var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <form class="form-horizontal" id="createShipments" action="processConsignment.php" method="post" role="form"> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="20%">Serial</th> <th class="text-center" scope="col" width="15%">ID</th> <th class="text-center" scope="col" width="15%">Code</th> <th class="text-center" scope="col" width="45%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td> <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td> <td class="code"></td> <td class="description"></td> <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> <button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp; <button type="submit" name="createShipment" value="createShipment" id="save" class="btn btn-success">Create Shipment</button> </form>

Answer 1

CR's key code is 13 . So you can disable submitting on keydown event. You can also allow submitting on another combination, such as ctrl + enter . Also, I improved you append function to auto-focus appended row's first column.

 let focusing = false; $(document).ready(function() { $("#addRow").click(function() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); // Find and remove selected table rows $("#shipmentItems").on("click", ".deleteRow", function() { $(this).closest('tr').remove(); }); }); $(document).ready(function() { $(document).on("keydown", '.form-control.serialNumber', function(e) { let code = e.code || e.keyCode || e.which; if (code == 13) { if (e.ctrlKey) { $('#createShipments').submit(); } else { appendRow(); e.preventDefault(); return false; } } }); function appendRow() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); focusing = true; $('#shipmentItems tr:last td:first input').focus(); focusing = false; } $(document).on('change', '.form-control.serialNumber', function() { if (focusing) return; var serialNumber = $(this).val(); //console.log( recid ); // Create a reference to $(this) here: $this = $(this); ID = 'ABC123'; code = 'PC8765'; description = 'Acme Standard Widget'; $this.closest('tr').find('.form-control.assetID').val(ID); $this.closest('tr').children('.code').html(code); $this.closest('tr').children('.description').html(description); appendRow(); }); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <form class="form-horizontal" id="createShipments" action="processConsignment.php" method="post" role="form"> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="20%">Serial</th> <th class="text-center" scope="col" width="15%">ID</th> <th class="text-center" scope="col" width="15%">Code</th> <th class="text-center" scope="col" width="45%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td> <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td> <td class="code"></td> <td class="description"></td> <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> <button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp; <button type="submit" name="createShipment" value="createShipment" id="save" class="btn btn-success">Create Shipment</button> </form>