Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 697
  • Last Modified:

Javascript keypad - currently selected field

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
evan_weiner
Asked:
evan_weiner
  • 3
  • 3
1 Solution
 
evan_weinerAuthor Commented:
<!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
 
Shinesh PremrajanTechnical ManagerCommented:
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
 
evan_weinerAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Shinesh PremrajanTechnical ManagerCommented:
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
 
evan_weinerAuthor Commented:
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
 
Shinesh PremrajanTechnical ManagerCommented:
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
 
Michel PlungjanIT ExpertCommented:
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

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now