LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   javascript: change value of text field and submit (https://www.linuxquestions.org/questions/programming-9/javascript-change-value-of-text-field-and-submit-330422/)

codec 06-04-2005 07:01 PM

javascript: change value of text field and submit without trace?
 
I am porting my *nix POS restaurant from command line version to web version (once it become stable, I would clear up the code and release it as GPL or MPL soon).

In order to change the work area to desk 7. The command line version would have to type 07[enter], the web version would accept both 07[enter] or 7[desk]. The desk key is in fact the numlock mapped as a comma (keyCode==188). You can see it as 7[comma]. The javascript would take care of the value transformation.

The problem is that when the value of the text field change from "7" to "07", it would appear as "07," or "07" for a very short time.
- I would like only "7" appear in the field while submitting, it is also ok if the value is not visible temporary
- if change the type from "text" to "hidden", it would just disappear and the layout changed
How can I change the value without trace while submitting?

Note: this program use firefox as front end, cache, history, form, saved password all disabled.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
</title><link rel="stylesheet" href="/css/david.css" type="text/css"/></head>
<body onload="javascript:document.cmd.cmd.focus()">
<h1>Program in development</h1><br/>
<script language="javascript" type="text/javascript">
function desknum(event) {
if (event.keyCode==188) {//desknum
if (document.cmd.cmd.value.match(/^\d{1,5}$/i)) {
document.cmd.cmd.value="0"+document.cmd.cmd.value;
document.cmd.submit();
document.cmd.cmd.disabled=true;
}}}
</script>
<form name="cmd" action="?dsk=7" method="post">
desk 7: <br/><input name="cmd" class="cmd" type="text" onkeydown="desknum(event)"/>
</form><script>
setTimeout("window.location='?dsk=None'",180000)
</script>
<table>
<tr class="header"><td/>Qty<td/>Descriptions<td/>Price<td/>Recod</tr><tr class="r0"><td/>1<td/><small>5 </small>GAMBAS FRITAS<td/>5.95<td/>01:30</tr>
</table>
<br/>Desk 7:<br/>base 5.56 + tax 0.39 = 5.95<br/>
</body>
</html>

-david.css-
body {
font-family: sans-serif, Helvetica, Geneva, Arial, SunSans-Regular;
color: black;
background:#FFFFFF}
div.navtext {
padding-left: 11em;}
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em;
list-style-type: none;
padding: 0;
margin: 0;}
ul.navbar li {
background: #DDDDFF;
margin: 0.5em 0;
padding: 0.3em;
border-top: 1px solid blue;
border-bottom: 1px solid blue;}
ul.navbar a {
text-decoration: none }
a:link, a:visited {
color: #000000;
font-weight: bold;
text-decoration: none}
a:hover {
color: white;
font-weight: bold;
background: black}
a:active {
color: white;
font-weight: bold;
background:#663366}
small {
color: #663366}
table {
border-collapse: collapse;
border: 3px solid #663366}
tr {
padding: 2em;
border-bottom: 1px solid #663366;
vertical-align:text-top;}
.header {
color: white;
font-weight: bold;
background: #663366}
.r0 {
background: #DDDDDD}
.r1 {
background: #EEEEEE}
td {
border-bottom: 1px solid #663366;
border-left: 1px dotted #663366;
border-right: 1px dotted #663366;
padding-left: 3px;
padding-right: 3px}
input {
border: 1px solid #663366;
padding: 8px;
font-weight: bold;}
.cmd {
font-size: 20px;}
.form {
padding: 3px;
margin-left: 11em;}
select {
font-size:12px;}

david_ross 06-05-2005 12:47 PM

Do you mean that you want to display it as 07 but only send 7 to the server? I'd recommend performing this check/change on the server side and not on the client side, it leaves a lot less places for things to go wrong.

codec 06-06-2005 08:02 AM

In a restaurant system. the waiter usually have to input the desk ID and then input the dishes and/or services. They made mistake sometimes mistaking the messing with the desk ID or Plate ID.

In order to solve the problem:
1) desk id is begin with 0 in the command line version. so in order to change the work area to desk 5, they must enter 05.

2) make a custom "desk" key. People enter 5[desk] without enter would do the same job. javascript is required.

If the javascript just transform the same command to type 1. No modification is need in the server side command interpretator. In fact I have 5-7 more keys using the same trick.

Anyway, thanks. If I can't find better way, I may modify the server side code doubleing the code.

theYinYeti 06-06-2005 08:08 AM

You may be interested in this article:
http://www.onlinetools.org/articles/...ivejavascript/

In there, they explain very well, with very good javascript, how to handle forms with javascript, and how to change text anywhere anytime.

Yves.


All times are GMT -5. The time now is 07:39 PM.