?
Solved

Javascript keypad - currently selected field

Posted on 2011-03-16
7
Medium Priority
?
694 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
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)
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

752 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