Making a Javascript "Keypad"?

Hello all, again,
I am trying to write a simple script that will allow me to display a small keypad of letters.  When the user clicks on the letter "A", for example, the "A" will appear in a text box of the form, and will be submitted with the form when the user hits the select button.  I do not want to use the "input type=button" option, but would rather like to use my own image for the letter "A" button.  I found a script on the Web that is close to what I want, but uses the "input type=button" option.  I tried to modify it, but I must be missing something obvious.  

The script I have been playing with is as follows:

<HTML>
<HEAD>
      <TITLE>Untitled</TITLE>

<script language="javascript">

var letter ='A'

function enter(obj, string)
{
obj.expr.value += string
}

</script>
      
</HEAD>

<BODY>
<form>

<input type="text" name="expr" size=20><p>

<a href="javascript:enter(this.form,letter)">click here to enter A</a>
<p>

<input type="button" value="A" onClick="enter(this.form,letter)">

</form>
</BODY>
</HTML>

In the above example, I tried to using both the "input type=button" option, and a "anchor" option (just to see how they both work).  The anchor option is what I ultimately want.  

The "input type=button" works fine in this example, but the "anchor" option does not work.

Any ideas what I am doing wrong?

Thanks in advance,
Stephen Pintauro
sjp060497Asked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
Here is one I wrote earlier:

<CENTER>
<FORM NAME="SEARCHFORM" ACTION="whatever you had before">
<INPUT NAME="PERSON" SIZE=20>
<INPUT TYPE="SUBMIT" VALUE="Send"><INPUT TYPE="RESET" VALUE="Clear">
</FORM>
<TABLE BORDER><TR><TD ALIGN="CENTER">
<FORM NAME="KEYBOARD">
<table><tr><td>
<INPUT TYPE="BUTTON" VALUE=" 1 " ONCLICK="document.SEARCHFORM.PERSON.value += '1'">
<INPUT TYPE="BUTTON" VALUE=" 2 " ONCLICK="document.SEARCHFORM.PERSON.value += '2'">
<INPUT TYPE="BUTTON" VALUE=" 3 " ONCLICK="document.SEARCHFORM.PERSON.value += '3'">
<INPUT TYPE="BUTTON" VALUE=" 4 " ONCLICK="document.SEARCHFORM.PERSON.value += '4'">
<INPUT TYPE="BUTTON" VALUE=" 5 " ONCLICK="document.SEARCHFORM.PERSON.value += '5'">
<INPUT TYPE="BUTTON" VALUE=" 6 " ONCLICK="document.SEARCHFORM.PERSON.value += '6'">
<INPUT TYPE="BUTTON" VALUE=" 7 " ONCLICK="document.SEARCHFORM.PERSON.value += '7'">
<INPUT TYPE="BUTTON" VALUE=" 8 " ONCLICK="document.SEARCHFORM.PERSON.value += '8'">
<INPUT TYPE="BUTTON" VALUE=" 9 " ONCLICK="document.SEARCHFORM.PERSON.value += '9'">
<INPUT TYPE="BUTTON" VALUE=" 0 " ONCLICK="document.SEARCHFORM.PERSON.value += '0'">
<!-- document.SEARCHFORM.PERSON.value = document.SEARCHFORM.PERSON.value.substring(0,document.SEARCHFORM.PERSON.length) -->
<INPUT TYPE="BUTTON" VALUE=" <X " ONCLICK="var a=document.SEARCHFORM.PERSON.value;if (a.length > 0) document.SEARCHFORM.PERSON.value=a.substring(0,a.length-1);">
</td></tr></table>
<table><tr><td>
<INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="document.SEARCHFORM.PERSON.value += 'Q'">
<INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="document.SEARCHFORM.PERSON.value += 'W'">
<INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="document.SEARCHFORM.PERSON.value += 'E'">
<INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="document.SEARCHFORM.PERSON.value += 'R'">
<INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="document.SEARCHFORM.PERSON.value += 'T'">
<INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="document.SEARCHFORM.PERSON.value += 'Y'">
<INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="document.SEARCHFORM.PERSON.value += 'U'">
<INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="document.SEARCHFORM.PERSON.value += 'I'">
<INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="document.SEARCHFORM.PERSON.value += 'O'">
<INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="document.SEARCHFORM.PERSON.value += 'P'">
</td></tr></table>
<table><tr><td>
<INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="document.SEARCHFORM.PERSON.value += 'A'">
<INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="document.SEARCHFORM.PERSON.value += 'S'">
<INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="document.SEARCHFORM.PERSON.value += 'D'">
<INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="document.SEARCHFORM.PERSON.value += 'F'">
<INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="document.SEARCHFORM.PERSON.value += 'G'">
<INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="document.SEARCHFORM.PERSON.value += 'H'">
<INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="document.SEARCHFORM.PERSON.value += 'J'">
<INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="document.SEARCHFORM.PERSON.value += 'K'">
<INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="document.SEARCHFORM.PERSON.value += 'L'">
</td></tr></table>
<table><tr><td>
<INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="document.SEARCHFORM.PERSON.value += 'Y'">
<INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="document.SEARCHFORM.PERSON.value += 'X'">
<INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="document.SEARCHFORM.PERSON.value += 'C'">
<INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="document.SEARCHFORM.PERSON.value += 'V'">
<INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="document.SEARCHFORM.PERSON.value += 'B'">
<INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="document.SEARCHFORM.PERSON.value += 'N'">
<INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="document.SEARCHFORM.PERSON.value += 'M'">
<INPUT TYPE="BUTTON" VALUE=" , " ONCLICK="document.SEARCHFORM.PERSON.value += ','">
<INPUT TYPE="BUTTON" VALUE=" . " ONCLICK="document.SEARCHFORM.PERSON.value += '.'">
<INPUT TYPE="BUTTON" VALUE=" - " ONCLICK="document.SEARCHFORM.PERSON.value += '-'">
</td></tr></table>
<BR><table><tr><td>
<INPUT TYPE="BUTTON" VALUE="_____________" ONCLICK="document.SEARCHFORM.PERSON.value += ' '">
</td></tr></table>
</FORM>
</TD></TR></TABLE>
</CENTER>
0
 
sjp060497Author Commented:
Edited text of question
0
 
Michel PlungjanIT ExpertCommented:
If you want images, change all the <INPUT TYPE="BUTTON" to
<A HREF="javascript:void(0);" ONCLICK....>
<IMG SRC="....."></A>

Michel
0
 
sjp060497Author Commented:
Thanks Michel,
Works great!
Stephen Pintauro
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.