Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Making a Javascript "Keypad"?

Posted on 1998-12-07
4
Medium Priority
?
1,920 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 200 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

722 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