Solved

Javascript keypad - currently selected field

Posted on 2011-03-16
7
690 Views
Last Modified: 2013-12-03
Hello,

I am attempting to use the referenced script but I have two fields I need to populate.  Is there a way that I can make it pass the numbers into the currently active field?

Thanks
0
Comment
Question by:evan_weiner
  • 3
  • 3
7 Comments
 
LVL 1

Author Comment

by:evan_weiner
ID: 35149006
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<form action="" method="post" class="" name="numPad">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
     <td colspan="3" align="center"><input type="text" name="sales_associate" size="20"></td>
     <td colspan="3" align="center"><input type="text" name="pin" size="20"></td>
</tr>
<tr>
     <td><input type="button" value="1" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td><input type="Button" value="2" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td><input type="Button" value="3" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
</tr>
<tr>
     <td><input type="Button" value="4" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td><input type="Button" value="5" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td><input type="Button" value="6" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
</tr>
<tr>
     <td><input type="Button" value="7" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td><input type="Button" value="8" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td><input type="Button" value="9" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
</tr>
<tr>
     <td></td>
     <td><input type="Button" value="0" style="font-size:25px;" onclick = "document.numPad.sales_associate.value =document.numPad.sales_associate.value+ this.value"></td>
     <td></td>
</tr>
</table>
<input type="submit" value="go" name="submit">
</form>

</BODY>
</HTML>
0
 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 35153801
Try this in all other buttons

<td><input type="Button" value="0" style="font-size:25px;" onclick = "addme(this);"></td>

function addme(val){

var salesval=document.numPad.sales_associate.value;

if(salesval=='') salesval=0;
 salesval=salesval+this.value;

  return true;
}

Hope this helps
0
 
LVL 1

Author Comment

by:evan_weiner
ID: 35153867
That's what I have already...The issue is that there are two input fields I need to populate.  Maybe what I need is something that changes which field the onlick="..." points at basd on where the cursor is.  Does that make sense?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 35153892
So let me clarify, you need onclick of the number to populate the sales_assocaite and the pin values, If thats the case then try this

function addme(val){

var salesval=document.numPad.sales_associate.value;
var pinval=document.numPad.pin.value;

if(salesval=='') salesval=0;
if(pinval=='') pinval=0;

 salesval=salesval+this.value;
 pinval=pinval+this.value

document.numPad.sales_associate.value = salesval;
document.numPad.pin.value =pinval;

  return true;
}


Hope this helps
0
 
LVL 1

Author Comment

by:evan_weiner
ID: 35153901
Sortof.

Let me provide a bit more information; perhaps I was too vague.  I have a web-based time clock system with a touchscreen monitor.  The user needs to be able to use the javascript keypad to enter their ID (sales_associate) and then "tab" to the next field by touching it on the screen and enter their PIN.  I am attempting to create an on-screen keyboard (numeric only) as there will be no physical keyboard attached to the computer.  Does that clarify the goal?
0
 
LVL 17

Accepted Solution

by:
Shinesh Premrajan earned 500 total points
ID: 35153978
Hope this is what you are looking for
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>

<BODY>
<form action="" method="post" class="" name="numPad">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
     <td colspan="3" align="center"><input type="text" name="sales_associate" onclick="setme(this)" size="20"></td>
     <td colspan="3" align="center"><input type="text" name="pin" size="20" onclick="setme(this)"></td>
</tr>
<tr>
     <td><input type="button" value="1" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="2" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="3" style="font-size:25px;" onclick = "addme(this)"></td>
</tr>
<tr>
     <td><input type="Button" value="4" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="5" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="6" style="font-size:25px;" onclick = "addme(this)"></td>
</tr>
<tr>
     <td><input type="Button" value="7" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="8" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="9" style="font-size:25px;" onclick = "addme(this)"></td>
</tr>
<tr>
     <td></td>
     <td><input type="Button" value="0" style="font-size:25px;" onclick = "addme(this)"></td>
     <td></td>
</tr>
</table>
<input type="hidden" value="sales_associate" name="focuson">
<input type="submit" value="go" name="submit">
</form>
<script type="text/javascript">
<!--
function addme(val){

var focuson = document.numPad.focuson.value;
if(focuson!='') 
	var obj=eval("document.numPad."+focuson);
	 obj.value=obj.value+val.value;
  return true;
}

function setme(val){
 document.numPad.focuson.value=val.name;
}

//-->
</script>
</BODY>
</HTML>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35154311
How about this.

It should work on all browsers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
var currentField="sales_associate";
window.onload=function() {
  focusIt()
}

function focusIt() {
  document.forms[0].elements[currentField].focus(); 
}
function addme(button){
  button.form.elements[currentField].value+=button.value;
}
function deleteme(button){ // use onclick="deleteme(this)
  val = button.form.elements[currentField].value;
  if (val.length>0) val = val.substring(0,val.length-1);
  button.form.elements[currentField].value=val;
}
</script>

</HEAD>

<BODY>
<form action="" method="post" class="" name="numPad">
<table cellpadding="2" cellspacing="2" border="0">
<tr>
     <td colspan="3" align="center"><input type="text" name="sales_associate" onfocus="currentField=this.name" size="20"></td>
     <td colspan="3" align="center"><input type="text" name="pin" size="20" onfocus="currentField=this.name"></td>
</tr>
<tr>
     <td><input type="button" value="1" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="2" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="3" style="font-size:25px;" onclick = "addme(this)"></td>
</tr>
<tr>
     <td><input type="Button" value="4" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="5" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="6" style="font-size:25px;" onclick = "addme(this)"></td>
</tr>
<tr>
     <td><input type="Button" value="7" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="8" style="font-size:25px;" onclick = "addme(this)"></td>
     <td><input type="Button" value="9" style="font-size:25px;" onclick = "addme(this)"></td>
</tr>
<tr>
     <td></td>
     <td><input type="Button" value="0" style="font-size:25px;" onclick = "addme(this)"></td>
     <td></td>
</tr>
</table>
<input type="submit" value="go" name="submit"> <input type="button" value="C" onclick="deleteme(this)">
</form>
</BODY>
</HTML>

Open in new window

0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

A Change in PHP Behavior with Session Write Short Circuit (http://php.net/manual/en/book.session.php#116217) (Winter 2014)** With the release of PHP 5.6 the session handler changed in a way that many think should be considered a bug.  See the note …
New Relic: Our company recently started researching several products to figure out what were the best ways for us to increase our web page speed and to quickly identify performance problems that we may be having. One of the products we evaluated wa…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
This video teaches users how to migrate an existing Wordpress website to a new domain.

791 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