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 id="createShipments" action="processConsignment.php" method="post" role="form">
<table id="shipmentItems" >
<thead>
<th scope="col" width="20%">Serial</th>
<th scope="col" width="15%">ID</th>
<th scope="col" width="15%">Code</th>
<th scope="col" width="45%">Description</th>
<th scope="col" width="5%"></th>
</thead>
<tbody>
<tr>
<td><input type="text" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
<td><input type="text" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
<td ></td>
<td ></td>
<td ><span ></span></td>
</tr>
</tbody>
</table>
<button type="button" name="addRow" value="addRow" id="addRow" >Add Asset</button>
<button type="submit" name="createShipment" value="createShipment" id="save" >Create Shipment</button>
</form>CodePudding user response：
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;
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;
}
function fillOtherFields(serialNumberField) {
var serialNumber = $(serialNumberField).val();
$serialNumberField = $(serialNumberField);
ID = 'ABC123';
code = 'PC8765';
description = 'Acme Standard Widget';
$serialNumberField.closest('tr').find('.form-control.assetID').val(ID);
$serialNumberField.closest('tr').children('.code').html(code);
$serialNumberField.closest('tr').children('.description').html(description);
appendRow();
}
$(document).ready(function() {
$("#addRow").click(appendRow);
// 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 {
fillOtherFields(e.target);
e.preventDefault();
return false;
}
}
});
$(document).on('change', '.form-control.serialNumber', function(e) {
if (focusing) return;
fillOtherFields(e.target);
});
});<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 id="createShipments" action="processConsignment.php" method="post" role="form">
<table id="shipmentItems" >
<thead>
<th scope="col" width="20%">Serial</th>
<th scope="col" width="15%">ID</th>
<th scope="col" width="15%">Code</th>
<th scope="col" width="45%">Description</th>
<th scope="col" width="5%"></th>
</thead>
<tbody>
<tr>
<td><input type="text" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
<td><input type="text" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
<td ></td>
<td ></td>
<td ><span ></span></td>
</tr>
</tbody>
</table>
<button type="button" name="addRow" value="addRow" id="addRow" >Add Asset</button>
<button type="submit" name="createShipment" value="createShipment" id="save" >Create Shipment</button>
</form>