javascripthtmlpopupnumeric-keypad

how to make a javascript number keypad popup

i have a website with 3 pages. each page has a form with two input fields. i am trying to make a popup number-keypad that will populate what ever input field called it. below is that base code i keep coming back to. 

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

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

<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>

Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>

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

</body>
</html>

is there a way of making one number key pad that i call from any page or do i need to make the above for each input?

thanks

Solution

  • One possible solution would be for you to add a javacript call into your header (by where you are currently calling the document.getElementById(id) call) that manipulates the DOM of that HTML, and simply inserts your div into it. I'd recommend a shell div on each page for that element, then the javascript would just have to grab that div by the id ("keypad") and insert inner HTML.

    Edit: as long as you share the javascript file between your 3 pages, you only have to implement the javascript once.