how to fill up numbers in a form field via a popup key pad(using Javascript/AJAX)

Question

how to fill up numbers in a form field via a popup key pad(using Javascript/AJAX)

2.3k Views Asked by AudioBubble At 21 October 2024 at 15:27

I have a small project, wherein I need to develop a keypad with all the digits+backspace+decimal (all as buttons). These digits when clicked should populate a form field (say a text box). This keypad should be located next to the form field as a link.

The keypad should be preferably Javascript/AJAX. Also the keypad routine should have a close button in order to minimize the popup keypad. (It's very much similar to a calendar control which we see in ticketing websites.)

To round up the keypad routine does nothing fancy but to just populate the form field, when the digits (buttons) are clicked.

I need help with coding the keyboard routine. How do I design the javascript? How to include the buttons (for the digits+decimal+backspace in the file)? How to code the part where when the buttons are clicked, then that value is showed in the form field?

Any help is greatly appreciated.

Thanks

Original Q&A

There are 1 best solutions below

**Peter** · Answer 1

Where's the problem?

No need to use ajax. Very quick and dirty example:

test here --> http://www.codebase.es/so/numpad.html

<html>
<head><title></title></head>
<body>

<script> function $(id) { return document.getElementById(id); } </script>

<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>

<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="&larr;" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>

</body>
</html>

Do not use "as is"... use css stylesheets, functions, etc.

how to fill up numbers in a form field via a popup key pad(using Javascript/AJAX)

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in AJAX

Related Questions in KEYBOARD

Related Questions in FORMFIELD

Trending Questions

Popular # Hahtags

Popular Questions