Solved

Javascript keypad - currently selected field

Posted on 2011-03-16
7
692 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
[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
  • 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
Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

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 article discusses how to create an extensible mechanism for linked drop downs.
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.

691 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