Link to home
Start Free TrialLog in
Avatar of ranniedv
ranniedv

asked on

Don't know how to approach this problem... Please help!!!!

(1) I have this application that scans barcodes. It doesnt contain any textboxes only a submit button. Now I want to make it in such a way that when someone scans the barcode, it will appear on the page itself. Scan another and it will scan and display the next barcode with the previous values still displayed. Therefore, if, say I scan 10 barcodes, I'd like to see it like this on the page:
123
234
345
456
...
101
<submit button>

(2) I already have some idea but its nowhere near to what I wanted in (1). Some lines on my HTML

<script language="javascript">
<!--
function writeOnPage() {
     document.write(event.keyCode);
}
-->
</script>
...

<body MS_POSITIONING="GridLayout" onkeypress="writeOnPage();">
...

(3) In (2), I can get the first keycode but succeeding keypresses doesnt give me anything anymore.

Please help!!! Thanks in advance!!!
Avatar of herongan
herongan

After you trigger the writeOnPage() function.
You try to view the source, you'll see only the keycode in the soucre file.

Hence, after trigger the writeOnPage(). writeOnPage() and all orginal source code will disappear.

Hero
You can use DOM to reach your goal!

Reference URL:
http://www.mozilla.org/docs/dom/domref/



document.write() overwrites what your existing document has. use innerHTML instead.

function writeOnPage() {
    document.getElementById('barcodes').innerHTML = event.keyCode;
}
......
<body ....>

<div id="barcodes"></div>

</body>
....

is your web application has an interface with hardware?
DOM Example for your case:

---------------------------------------
<html>
<script language="javascript">
<!--
function writeOnPage() {
    var oNewNode = document.createElement("DIV");
    divList.appendChild(oNewNode);

    oNewNode.innerHTML=event.keyCode + "<br>";
}
-->
</script>

<body MS_POSITIONING="GridLayout" onkeypress="writeOnPage()">
<div id=divList></div>
</body>
</html>
---------------------------------------

Hero
Avatar of ranniedv

ASKER

What function can I use to convert the event.keycode into its equivalent character? I will try this and see if it works. Thanks!!!
Use the String.fromCharCode() method.  The following code will add the actual characters to the div:
----------
<script language="javascript">
function getobj(g_elm)  {
     if (document.all) return document.all[g_elm];
     if (document.layers) return document.layers[g_elm];
     if (!document.all && document.getElementById) return document.getElementById(g_elm);
}
document.onkeypress = function()  {
     getobj('div1').innerHTML += String.fromCharCode(event.keycode)+ "<br>";
}
</script>
<body MS_POSITIONING="GridLayout">
     <div id="div1">&nbsp;</div>
</body>
----------
antithesis is correct but it has a typo.

String.fromCharCode(event.keyCode)


<html>
<head>
<script>
function writeOnPage() {
   document.getElementById('barcodes').innerHTML += String.fromCharCode(event.keyCode) + '<br>';
}
</script>
</head>
<body onkeypress="writeOnPage();">
<div id="barcodes"></div>
</body>
</html>
Oh right, thanks man.
----------
<script language="javascript">
function getobj(g_elm)  {
    if (document.all) return document.all[g_elm];
    if (document.layers) return document.layers[g_elm];
    if (!document.all && document.getElementById) return document.getElementById(g_elm);
}
document.onkeypress = function()  {
    getobj('div1').innerHTML += String.fromCharCode(event.keyCode)+ "<br>";
}
</script>
<body MS_POSITIONING="GridLayout">
    <div id="div1">&nbsp;</div>
</body>
----------
Another question - Is it possible to get all the values that I have typed into that DIV? Thanks much again!
ASKER CERTIFIED SOLUTION
Avatar of herongan
herongan

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
"Is it possible to get all the values that I have typed into that DIV"

yes, using my example,

alert(document.getElementById('barcodes').innerHTML);
Questions just keep popping up but I will award the points very shortly. One more question - I looked at the source with the values all displayed. I dont see any of it on the source. How can I reference this div or span so I can use these values to other pages? Will Querystring work?? Thanks for all the help!!!
querystring would work only if the value to be passed is not too long.

<a href="nex.html" onclick="this.href+='?value='+document.getElementById('barcodes').innerHTML;">next page</a>