Solved

Making a Javascript "Keypad"?

Posted on 1998-12-07
4
1,911 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
[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
  • 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

Technology Partners: 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

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

734 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