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

x
?
Solved

Making a Javascript "Keypad"?

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…
Suggested Courses

572 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