[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Javascript keypad - currently selected field

Posted on 2011-03-16
7
Medium Priority
?
695 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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 
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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

650 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