fill up numbrs in a form field via a popup key pad(javascpt)

[swathip]

Hello,

I have a small project, wherein i have 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.(its very much similar to a calendar control which we see in ticketing websites)

I needed help with coding the keyboard routine.i mean how do i design the javascript file.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.

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

 

[vacunita]

That sounds fairly simple. A little time consuming in creating the pad, but fairly simple.



1. A Make a Div that will hold the keypad, and set its display to none for starters.
2. Put your link next to your textbox , and set its onClick event to show the keypad.
3. Add the required buttons to the div, and set the onClick event of the buttons to a function that will take their value, and stick it in text box.

<input type=text value="" id="mybox">
<a href="#" onClick="show_pad(); return false;">Keypad</a>
<div id="keypad" style="display:none;">
<button name="btn_one" value="1" onClick="putValueInBox(this.value);">1</button><button name="btn_two" value="2" onClick="putValueInBox(this.value);">>2</button><button name="btn_three" value="3" onClick="putValueInBox(this.value);">>3</button>...
</div>

function show_pad(){
var pad=document.getElementById('keypad');
if(pad.style.display=='none'){
pad.style.display="block";
}
else{
pad.style.display="none";
}
}


function putValueInBox(val){
var mytextbox=getElementById('mybox');
mytextbox.value+=val;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

Just out of interest, where did the AJAX requirement come from?





Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/