Using barcode scanner plugin on Phonegap to populate a field/label on HTML document

Question

hopefully somebody can help me with the following. . . if you look at my below code you can see part of my html submission form, I am using a barcode scanner plugin on phonegap build to try and populate one of the fields. The scanner works perfectly but i cannot seem to make it appear in a field similar to my other submission lines... I want it to appear in a field so I can choose to enter serial number manually or use scanner. . . i also want to pull this data to a database. My Javascript is fine as the scanner does work, just doesnt appear in the way i want it to. Id = "info" gives the result of the scanner.

  <div class="form-group"> <label for="addressline1">Address Line 1:</label> <input type="text" class="form-control" placeholder="Please enter address of installation" required="required" name="addressline1"> </div> <div class="form-group"> <label for="addressline2">Address Line 2:</label> <input type="text" class="form-control" placeholder="Please enter address of installation" name="addressline2"> </div> <div class="form-group"> <label for="addressline3">Address Line 3:</label> <input type="text" class="form-control" placeholder="Please enter address of installation" name="addressline3"> </div> <br> <div class="form-group"> <a href="#" class="btn btn-primary btn-lg btn-block" id="scan">Scan Serial Number</a> </div> <div class="form-group"> <br> <h4><strong>Serial Number:</strong></h4><p id="info" type="number" class="form-control" placeholder="Please use barcode scanner above" required="required" name="info"></p> </div> 

 var app = { initialize: function() { this.bindEvents(); }, bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); document.getElementById('scan').addEventListener('click', this.scan, false); document.getElementById('encode').addEventListener('click', this.encode, false); }, onDeviceReady: function() { app.receivedEvent('deviceready'); }, receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); }, scan: function() { console.log('scanning'); var scanner = cordova.plugins.barcodeScanner; scanner.scan( function (result) { console.log("Scanner result: \\n" + "text: " + result.text + "\\n" + "format: " + result.format + "\\n" + "cancelled: " + result.cancelled + "\\n"); document.getElementById("info").innerHTML = result.text; console.log(result); }, function (error) { console.log("Scanning failed: ", error); } ); }, encode: function() { var scanner = cordova.require("cordova/plugin/BarcodeScanner"); scanner.encode(scanner.Encode.TEXT_TYPE, "http://www.nhl.com", function(success) { alert("encode success: " + success); }, function(fail) { alert("encoding failed: " + fail); } ); } }; 

Answer 1

I figured this out a while ago and forgot to post the answer, it was a very simply fix. Instead of using use the following . . . This allows exactly what I needed. Hope this helps somebody else someday.