?
Solved

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

Posted on 2003-03-20
13
Medium Priority
?
330 Views
Last Modified: 2006-11-17
(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!!!
0
Comment
Question by:ranniedv
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +1
13 Comments
 
LVL 1

Expert Comment

by:herongan
ID: 8178388
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
0
 
LVL 1

Expert Comment

by:herongan
ID: 8178392
You can use DOM to reach your goal!

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



0
 
LVL 30

Expert Comment

by:third
ID: 8178408
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?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Expert Comment

by:herongan
ID: 8178432
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
0
 

Author Comment

by:ranniedv
ID: 8179130
What function can I use to convert the event.keycode into its equivalent character? I will try this and see if it works. Thanks!!!
0
 
LVL 1

Expert Comment

by:Antithesis
ID: 8179505
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>
----------
0
 
LVL 30

Expert Comment

by:third
ID: 8179530
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>
0
 
LVL 1

Expert Comment

by:Antithesis
ID: 8179599
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>
----------
0
 

Author Comment

by:ranniedv
ID: 8183596
Another question - Is it possible to get all the values that I have typed into that DIV? Thanks much again!
0
 
LVL 1

Accepted Solution

by:
herongan earned 500 total points
ID: 8184987
hi ranniedv,

I want to know:

1.After scan a barcode, the barcode scanner is
output "Enter", "Tab" or None in the end of the ouput string?

2.Each barcode's character length is equal?
Because String.fromCharCode(event.keyCode) will only output one character, if the barcode is different length how will you know where is the end the the barcode for this item?

---------------------------------------------------------

I have another suggestion, but maybe not a better one.
You separate the browser into 3 frames (list, input, process)<frameset rows=80%, 20%, 0%>.

In the "list" frame page, it contain a <form>. <form> contains <div id="divList"><div> and <input type=submit name=cmdSave value=Save>. It will list all the input item and save.

In the "input" frame page, it contains a <form ... target="process">. <form> contains a <input name=txtBarcode> and <input type=submit name=cmdOK value="OK">. If the barcode is output "Enter" in the end of the string, then after user scan the barocde on the textbox. It will submit the value to "process" frame.

In the "process" frame page, it will get the submit value from "input" frame page to found the item information.
If found the item, it will use javascript ("innerHTML") to add a textbox(readOnly) with barcode to "list" frame page(you can add some information behind the textbox.
When user entered all the item, then click Save button to submit the page's all textbox to the server page.
Then you'll get all the item barcode!

Note: you need to consider the textbox name.
i think txtItem1, txtItem2..3..4...5 is better.

"top.list.document.forms[0].all.divList1.children.length" will return how many children already in the divList1.

--------------------------------------------------

This only is a work flow that i already used in my Web Application and it work fine.
My english not well, if any problem you can post here.


Hero
0
 
LVL 30

Expert Comment

by:third
ID: 8192009
"Is it possible to get all the values that I have typed into that DIV"

yes, using my example,

alert(document.getElementById('barcodes').innerHTML);
0
 

Author Comment

by:ranniedv
ID: 8197377
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!!!
0
 
LVL 30

Expert Comment

by:third
ID: 8199302
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>
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question