Barcode

Design a HTML web page for barcode input

The HTML page used to receive barcode data can be configured with one or more scan fields. Below is an example with 2: 
        
        <html>
        <head>
          <script type="text/javascript">
          
         <!-- called when a scan has been completed -->
          function onscantofield(bardata,barfield,doenter) {
            var x = document.getElementById(barfield);
            x.value = bardata;
            if (doenter.localeCompare("true") == 0) document.getElementById("myForm").submit();
          }

          <!-- called when a scan has been completed -->
          function onscan(bardata){
            alert( "Barcode result : " + bardata );
          }

          <!-- called when user from HTML page click on a scanner button, it will start the hardware/camera scanner on iOS -->
          function startscan(barfield){
            window.location = "startbarcodescanner?id="+barfield;
          }
          </script>
        </head>
        <body>
        <form action="http://www.w3schools.com/tags/demo_form_method.asp" method="GET">

          <h3>Enter Barcode:</h3>
          <input id="barcodefield1" /><br />
        
          <input id="barcodefield2" /><br />
        
          <input onclick="startscan('barcodefield1')"
              type="button"
              value="Scan to field 1" />
          <input onclick="startscan('barcodefield2')"
              type="button"
              value="Scan to field 2" />
              <input name="button" type="submit" style="font-size: 20px" value="Send data to server">
         </form>
        </body>
        </html>
Function onscan() is optional, and can be called, when a scan has been completed. Replace alert() with code updating the server with the scan code.

As to start a scan from the HTML page, and not using a hardware key, it is important to use the location URL readbarcode://. This name is fixed, and cannot be changed. Give the barcode input field as parameter to the call. In the example barcodefield1 and barcodefield2 are used.

If a hardware scan key is used, the scan data will be send to an input field name barcodefield1. This name is fixed, and cannot be changed.