CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 7 of 7

Thread: HTML Keypad...

  1. #1
    Join Date
    Mar 2006
    Posts
    228

    Question HTML Keypad...

    Hello,

    Hope someone can help me out..

    Im trying to create an HTML keypad.

    When a user press 4 numbers making it load a page. (../code.htm?code=_____)

    I have no idea how to do this and I have been googleing to find this and can't find examples anywhere.

    Does anyone know how to do this or know where I can find an example.

    Take a look at the screenshot attached to this post to know what I am trying to do.

    Thanks.
    Attached Images Attached Images  

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: HTML Keypad...

    • You are going to have to create a temp variable named something like code.
    • If the user presses *, then set code to "".
    • Everytime a number is pressed just add the string value of the number to the variable code.
    • If the length is 4, then use window.location = "../code.htm?code=" + code to redirect.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Jul 2005
    Location
    Currently in Mexico City
    Posts
    568

    Re: HTML Keypad...

    lol, that was fun :

    HTML Code:
    <body onload="emptyCode();">
    
    <script type="text/javascript">
    function addCode(key){
    	var code = document.forms[0].code;
    	if(code.value.length < 4){
    		code.value = code.value + key;
    	}
    	if(code.value.length == 4){
    		document.getElementById("message").style.display = "block";
    		setTimeout(submitForm,1000);	
    	}
    }
    
    function submitForm(){
    	document.forms[0].submit();
    }
    
    function emptyCode(){
    	document.forms[0].code.value = "";
    }
    </script>
    <style>
    body {
    	text-align:center; 
    	background-color:#333333; 
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }	
    #keypad {margin:auto; margin-top:20px;}
    
    #keypad tr td {
    	vertical-align:middle; 
    	text-align:center; 
    	border:1px solid #000000; 
    	font-size:18px; 
    	font-weight:bold; 
    	width:40px; 
    	height:30px; 
    	cursor:pointer; 
    	background-color:#666666; 
    	color:#CCCCCC;}
    #keypad tr td:hover {background-color:#999999; color:#FFFF00;}
    
    .display {
    	width:130px; 
    	margin:10px auto auto auto; 
    	background-color:#000000; 
    	color:#00FF00; 
    	font-size:18px; 
    	border:1px solid #999999;
    }
    #message {
    	text-align:center; 
    	color:#009900; 
    	font-size:14px; 
    	font-weight:bold; 
    	display:none;
    }
    </style>
    
    <form action="code.htm" method="get">
    <table id="keypad" cellpadding="5" cellspacing="3">
    	<tr>
        	<td onclick="addCode('1');">1</td>
            <td onclick="addCode('2');">2</td>
            <td onclick="addCode('3');">3</td>
        </tr>
        <tr>
        	<td onclick="addCode('4');">4</td>
            <td onclick="addCode('5');">5</td>
            <td onclick="addCode('6');">6</td>
        </tr>
        <tr>
        	<td onclick="addCode('7');">7</td>
            <td onclick="addCode('8');">8</td>
            <td onclick="addCode('9');">9</td>
        </tr>
        <tr>
        	<td onclick="addCode('*');">*</td>
            <td onclick="addCode('0');">0</td>
            <td onclick="addCode('#');">#</td>
        </tr>
    </table>
    <input type="text" name="code" value="" maxlength="4" class="display" readonly="readonly" />
    <p id="message">ACCESSIGN...</p>
    </form>
    </body>
    Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?

    I had a nightmare last night. I was dreaming that I’m 64-bit and my blanket is 32-bit and I couldn’t cover myself with it, so I’ve spent the whole night freezing. And in the morning I find that my blanket just had fallen off the bed. =S (from: bash.org.ru)

    //always looking for job opportunities in AU/NZ/US/CA/Europe :P
    willCodeForFood(Arrays.asList("Java","PHP","C++","bash","Assembler","XML","XHTML","CSS","JS","PL/SQL"));

    USE [code] TAGS! Read this FAQ if you are new here. If this post was helpful, please rate it!

  4. #4
    Join Date
    Jul 2005
    Location
    Currently in Mexico City
    Posts
    568

    Re: HTML Keypad...

    What I can't get is that sometimes we do all the work for others, for free, practically wasting out time on nothing. And in return we can't get even a simple comment or a "thanks"...
    Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?

    I had a nightmare last night. I was dreaming that I’m 64-bit and my blanket is 32-bit and I couldn’t cover myself with it, so I’ve spent the whole night freezing. And in the morning I find that my blanket just had fallen off the bed. =S (from: bash.org.ru)

    //always looking for job opportunities in AU/NZ/US/CA/Europe :P
    willCodeForFood(Arrays.asList("Java","PHP","C++","bash","Assembler","XML","XHTML","CSS","JS","PL/SQL"));

    USE [code] TAGS! Read this FAQ if you are new here. If this post was helpful, please rate it!

  5. #5
    Join Date
    Jan 2009
    Posts
    1

    Thumbs up Re: HTML Keypad...

    @Xeel
    Thank you so much.

  6. #6
    Join Date
    Jan 2014
    Posts
    1

    Re: HTML Keypad...

    Dude are you kidding me!! This is fantastic!!! Thanks very much!!

  7. #7
    Join Date
    May 2002
    Posts
    10,943

    Re: HTML Keypad...

    Welcome to the forums, wellverzed.

    Please remember to keep your posts relevant. This thread is over 5 years old!
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured