Setup Mocha Barcode - Design HTML page

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">
          function onscan(bardata) {
            alert( "Barcode result : " + bardata );
          }
          function startscan(barfield) {
            window.location = "readbarcode://"+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 the toolbar scan icon, 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 the toolbar scan button is used, the scan data will be send to an input field name barcodefield1. This name is fixed, and cannot be changed.

In version 2.4, if there is not a barcodefield1 field, data is send to the first input field, which is not hidden. This may not work with complicated pages, such as the google search page.