Solved

Making a Javascript "Keypad"?

Posted on 1998-12-07
4
1,905 Views
Last Modified: 2010-05-19
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
0
Comment
Question by:sjp060497
  • 2
  • 2
4 Comments
 

Author Comment

by:sjp060497
ID: 1275224
Edited text of question
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
ID: 1275225
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1275226
If you want images, change all the <INPUT TYPE="BUTTON" to
<A HREF="javascript:void(0);" ONCLICK....>
<IMG SRC="....."></A>

Michel
0
 

Author Comment

by:sjp060497
ID: 1275227
Thanks Michel,
Works great!
Stephen Pintauro
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now