title: HTML Form - Prevent Form Submission For Input Using Barcode Scanner that adds Enter (CR) Suffix
body: <p>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.</p>
  <p>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.</p>
  <p>Here's my form/table setup:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#addRow").click(function() {
      var markup = "&lt;tr&gt;&lt;td&gt;&lt;input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"&gt;&lt;/td&gt;&lt;/td&gt;&lt;td class=\"productCode\"&gt;&lt;/td&gt;&lt;td class=\"description\"&gt;&lt;/td&gt;&lt;td class=\"text-center deleteRow\"&gt;&lt;span class=\"glyphicon glyphicon-trash\"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;";
      $("#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 = "&lt;tr&gt;&lt;td&gt;&lt;input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"&gt;&lt;/td&gt;&lt;/td&gt;&lt;td class=\"code\"&gt;&lt;/td&gt;&lt;td class=\"description\"&gt;&lt;/td&gt;&lt;td class=\"text-center deleteRow\"&gt;&lt;span class=\"glyphicon glyphicon-trash\"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;";
      $("#shipmentItems").append(markup);
  
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;form class="form-horizontal" id="createShipments" action="processConsignment.php" method="post" role="form"&gt;
  
    &lt;table id="shipmentItems" class="table table-condensed table-striped table-bordered"&gt;
      &lt;thead&gt;
        &lt;th class="text-center" scope="col" width="20%"&gt;Serial&lt;/th&gt;
        &lt;th class="text-center" scope="col" width="15%"&gt;ID&lt;/th&gt;
        &lt;th class="text-center" scope="col" width="15%"&gt;Code&lt;/th&gt;
        &lt;th class="text-center" scope="col" width="45%"&gt;Description&lt;/th&gt;
        &lt;th class="text-center" scope="col" width="5%"&gt;&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""&gt;&lt;/td&gt;
          &lt;td class="code"&gt;&lt;/td&gt;
          &lt;td class="description"&gt;&lt;/td&gt;
          &lt;td class="deleteRow"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary"&gt;Add Asset&lt;/button&gt; &amp;nbsp; &amp;nbsp;
    &lt;button type="submit" name="createShipment" value="createShipment" id="save" class="btn btn-success"&gt;Create Shipment&lt;/button&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>