Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Help on Random No PinPad

    Dear all,

    Appreciate your kind guidance and help in helping me to solve the following code. I wanted to generate a set of random number on the pinpad everytime the page is being loaded. (1-9 but the number can only appear once) How do I get about doing it?

    Sincere Thanks
    CAD

    Code:
    <html>
    <head>
    <title>Testing with PinPad</title>
    
    
    <div align="center">
    
    <script language="JavaScript">
    
    document.logonForm.autocomplete='off';
    
    	function setPin(ctl)
    	{
    	var pinVal = document.logonForm.login_pin.value;
    	ctlValue =cutSpaces(ctl.value);
    
    			if(ctlValue=='Clear'){
    
    			document.logonForm.login_pin.value = '';}
    
    			else if(ctlValue=='x')
    			{
    			}
    
    			else {
    
    			if(pinVal.length==6)
    				{
    			document.logonForm.pin.value = '';
    				}
    
    			else {
    			document.logonForm.login_pin.value = pinVal + ctlValue;
    				  }
    
    			}
    
    
    			}
    
    
    	function cutSpaces(s)
    	{
    	var s1, x;
    	x = s1 = "";
    	l = s.length;
    
    	for(i = 0; i < l; i++)
    	if((x = s.charAt(i)) != " ")
    	s1+=x;
    	return s1;
    
    	}
    
    </script>
    
    <script language="javascript">
    document.logonForm.login_userid.focus();
    </script>
    
    </head>
    
    <form method="post" action="" name="logonForm">
    
    <table width="550" border="0" cellspacing="0" cellpadding="0">
    	<tr>
    	<td>
    
    	<table width="100%"  border="0" cellspacing="0" cellpadding="5">
    		<tr>
    		<td>
    		<div align="left" class="Headline1">ViA ONLINE - LOGIN WITH PIN PAD</div><hr>
    		</td>
    		</tr>
    	</table>
    
    	<div align="center" class="Error"><br></div>
    	</td>
    	</tr>
    </table>
    
    
    <table width="550" border="0" cellspacing="0" cellpadding="0">
    	<tr>
    	<td width="393">
    
    	<table width="100%"  border="0" cellspacing="0" cellpadding="5">
    
    		<tr>
    		<td width="42%">
    		<div align="left">CUSTOMER NUMBER</div>
    		</td>
    		<td width="58%">
    		<div align="left"><input type="text" name="login_userid" class="TopTextbox" value=""></div>
    		</td>
    		</tr>
    
    
    		<tr>
    		<td width="42%">
    		<div align="left">PASSWORD</div>
    		</td>
    		<td width="58%">
    		<div align="left"><input type="password" name="login_password" class="TopTextbox" value=""></div>
    		</td>
    		</tr>
    
    
    		<tr>
    		<td width="42%">
    		<div align="left">PIN</div>
    		</td>
    		<td width="58%">
    		<div align="left">
    		<input type="password" name="login_pin" class="pin_textbox" value="" readonly="readonly" >
    		<br>Enter using Pin Pad
    		</div>
    		</td>
    
    	</tr>
    
    	<tr>
    	<td></td>
    
    
    
    		<td><div align="left"><input type="submit" name="login_submit" class="Button1" value="LOGIN">
    		</div></td>
    
    	</tr>
    	</table>
    	</td>
    
    
    		<td width="157"><div align="left">
    		<table width="105" border="0" align="right" cellpadding="1" cellspacing="1" bgcolor="#C2C2C2">
    		<tbody>
    
    				<tr>
    				<td>
    				<input name="firstbutton" value="pinpad_0" type="hidden">
    
    						<table width="100%" height="112" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td colspan="3">
    
    								<table border="0" cellpadding="0" cellspacing="0" width="100%">
    								<tbody>
    								<tr>
    								<td border="1" colspan="3" id="titleBar" style="cursor: move;" class="pinpad_key" bgcolor="#246584" nowrap="nowrap">
    
    
    								<center>
    								<font color="white"><b>&nbsp;Pin Pad</b></font></center>
    
    								</td>
    								</tr>
    								</tbody>
    								</table>
    				</td>
    				</tr>
    
    		<tr>
    		<td height="22" align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_0" value='5' onclick="setPin(this)" type="button">
    		</td>
    
    		<td align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_6" value="3" onclick="setPin(this)" type="button">
    		</td>
    
    		<td align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_5" value="4" onclick="setPin(this)" type="button">
    		</td>
    		</tr>
    
    
    
    		<tr>
    		<td height="22" align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_7" value="6" onclick="setPin(this)" type="button">
    		</td>
    
    		<td align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_4" value="1" onclick="setPin(this)" type="button">
    		</td>
    
    		<td align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_8" value="9" onclick="setPin(this)" type="button">
    		</td>
    		</tr>
    
    
    
    		<tr><td height="22" align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_9" value="2" onclick="setPin(this)" type="button">
    		</td>
    
    		<td align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_1" value="7" onclick="setPin(this)" type="button">
    		</td>
    
    		<td align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_2" value="8" onclick="setPin(this)" type="button">
    		</td>
    		</tr>
    
    
    
    		<tr><td height="22" align="center">
    		<input class="pinpad" tabindex="4" name="pinpad_3" value="0" onclick="javascript:setPin(this)" type="button">
    		</td>
    
    		<td colspan="2" align="center">
    		<input class="pinpad_clear" tabindex="4" name="pinpad_clear" value="Clear" onclick="setPin(this)" type="button">
    		</td>
    		</tr>
    
    		</tbody>
    		</table>
    		</td>
    
    		</tr>
    		</tbody>
    		</table>
    		</div>
    		</td>
    		</tr>
    		</table>
    
    <table width="550" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>
    		<table width="100%"  border="0" cellspacing="0" cellpadding="5">
    		<tr>
    		<td><br><hr>
    
    
    
    
    </form>
    
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,418 Times in 4,383 Posts
    How many digits in the PIN? And WHY can't a digit repeat? In many of my personal PINs I have a digit that repeats.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    He means that he wants to generate a pin pad (not a pin number!) which for security reasons has the numbers arranged on the pad in a different order each time.

    At the moment his pinpad is arranged

    5 3 4
    6 1 9
    2 7 8
    0

    each time, but he now wants a different order each time the page loads.

    My on-line bank does this.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,418 Times in 4,383 Posts
    I'll be darned.

    Well, that's dirt simple.

    Just put the digits into an array and then sort the array using a randomizer function.

    Hmmm...I tried this:
    Code:
    <script>
    function fifty( ) { return Math.random() >= 0.5 ? 1 : 0; }
    
    var pins = [0,1,2,3,4,5,6,7,8,9];
    pins.sort( fifty );
    
    document.write( pins.join("::") );
    </script>
    and it's not really very good. To many sequences left untouched.

    This gave much better results:
    Code:
    <script>
    var pins = [0,1,2,3,4,5,6,7,8,9];
    for ( var p = 0; p < 10; ++p )
    {
        var rand = Math.floor( Math.random() * 10 );
        var temp = pins[p];
        pins[p] = pins[rand];
        pins[rand] = temp;
    }
        
    document.write( pins.join("::") );
    </script>
    Last edited by Old Pedant; 05-22-2009 at 08:16 AM. Reason: typos

  • Users who have thanked Old Pedant for this post:

    Cntl_Alt_Del (05-22-2009)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Somewhat simpler alternative:-

    Code:
    <script type = "text/javascript">
    
    var pins = [0,1,2,3,4,5,6,7,8,9];  
    function randOrd(){return (Math.round(Math.random())-0.5); }
    pins.sort(randOrd);
    
    alert (pins);
    
    </script>
    (I now see you say you tried this but "too many sequences left untouched". How so?)
    Last edited by Philip M; 05-22-2009 at 08:44 AM.

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    He means that he wants to generate a pin pad (not a pin number!) which for security reasons has the numbers arranged on the pad in a different order each time.

    Each time, but he now wants a different order each time the page loads.
    Quote Originally Posted by Philip M View Post
    Somewhat simpler alternative:-

    Code:
    <script type = "text/javascript">
    
    var pins = [0,1,2,3,4,5,6,7,8,9];  
    function randOrd(){return (Math.round(Math.random())-0.5); }
    pins.sort(randOrd);
    
    alert (pins);
    
    </script>
    Thanks Philip. This is exactly what i want. Pardon me for my poor english and explaination.

    Is the above code used on ur online bank? Did you attempt to hide and reappear the pinpad whenever u click on the Pin textbox? Also, do i have to use the "onload" function to make load this function everytime i re-entered the site?

    Sorry, really weak on this, hope you guys can help me out.

    Sincere Thanks
    CAD
    Last edited by Cntl_Alt_Del; 05-22-2009 at 03:47 PM.

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Dear all,

    I cant get the random numbers to appear on the individual pin button. Any expert can help me out?

    Sincere Thanks
    CAD

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Give the pin buttons an id as a well as a name:-

    <input type="button" class="pinpad" tabindex="4" id = "pinpad_2" name="pinpad_2" value="3" onclick="setPin(this)" ></td>


    and then:

    <body onload = "setPinValues()">

    Code:
    <script type = "text/javascript">
    
    function setPinValues() {
    var pins = [0,1,2,3,4,5,6,7,8,9];  
    function randOrd(){return (Math.round(Math.random())-0.5); }
    pins.sort(randOrd);
    
    for (var i = 0; i<=9; i++) {
    document.getElementById("pinpad_"+i).value = pins[i];
    }
    }
    
    </script>
    Last edited by Philip M; 05-23-2009 at 05:45 PM.

  • Users who have thanked Philip M for this post:

    Cntl_Alt_Del (05-23-2009)

  • #9
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Cntl_Alt_Del View Post
    Dear all,

    I cant get the random numbers to appear on the individual pin button. Any expert can help me out?

    Sincere Thanks
    CAD
    I was having the exact same issue. Looks like the solution is below though.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,418 Times in 4,383 Posts
    Quote Originally Posted by Philip M View Post
    Give the pin buttons an id as a well as a name:-

    <input type="button" class="pinpad" tabindex="4" id = "pinpad_2" name="pinpad_2" value="3" onclick="setPin(this)" ></td>
    ??? WHY ???

    Code:
    <body onload = "setPinValues()">
    
    <script type = "text/javascript">
    
    function setPinValues() {
        var pins = [0,1,2,3,4,5,6,7,8,9];  
        function randOrd(){return (Math.round(Math.random())-0.5); }
        pins.sort(randOrd);
    
        for (var i = 0; i<=9; i++) {
            document.forms[0].elements["pinpad_"+i].value = pins[i];
        }
    }
    </script>
    Works just as well and no need for the IDs. If you know the name of the form, use that in place of forms[0] of course.

    Should be marginally faster (or at least not slower) as the object lookup only has to look through the names in the form, not all possible id's anywhere on the page. (Of course, if there are few id's on the page, it's probably a wash...but I can't see how the use of the names will ever be slower and could be faster.)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,418 Times in 4,383 Posts
    Quote Originally Posted by Philip M View Post
    (I now see you say you tried this but "too many sequences left untouched". How so?)
    NEVER MIND! My fault!

    I wrote my function to return 1 or 0 whereas yours returns -.5 or +.5. Sort needs a minus/plus distinction. When I return 0, that means the two values are seen as equal and so not swapped.
    Code:
    function fifty( ) { return Math.random() >= 0.5 ? 1 : 0; }
    All I had to do to fix it was change to
    Code:
    function fifty( ) { return Math.random() >= 0.5 ? 1 : -1; }
    My goof. Works equally well now.
    Last edited by Old Pedant; 05-23-2009 at 09:06 PM.

  • #12
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sincere Thanks to Old Pedant & Philip M's advises in guiding me in getting the desired output that i want.

    Lastly, I wish to hid my Pin Pad whenever the page is loaded and will appear when the user click on the Pin textbox. I try using the following method but it didnt work.

    Anyone can assist?
    CAD

    Code:
     
    <script language="JavaScript">
    
    function setTable(what)
    {
    if(document.getElementById(what).style.display=="none")
    	{
    	document.getElementById(what).style.display="block";
    	}
    
    else if(document.getElementById(what).style.display=="block")
    	{
    	document.getElementById(what).style.display="none";
    	}
    }
    </script>
    
    <script language="JavaScript">
    
    function hide( )
    
    {
    document.loginForm1.table1.style.visibility = 'hidden';
    }
    
    </script>
    
    <script language="JavaScript">
    
    window.onload = hide()
    
    </script>
    
    </head>
    
    <body onload="setPinValues()">
    
    <form method="post" action="" name="logonForm1">
    
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    
    <tr>
    		<td width="42%">
    		<div align="left">PIN</div>
    		</td>
    		<td width="58%">
    		<div align="left">
    		<input type="password" name="login_pin" class="pin_textbox" value="" readonly="readonly" onclick="setTable('table1')">
    		<br>Enter using Pin Pad
    		</div>
    		</td>

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,418 Times in 4,383 Posts
    Don't do it like that. That *flips* the sense of the display each time it is called. But if the style isn't set in the first place, it's unpredictable.

    Unless you have a reason to hide the pinpad later--that is, if you just want it hidden when the page loads but never to re-hide later--then just do:
    Code:
    <input type="password" name="login_pin" 
           class="pin_textbox" value=""
           readonly="readonly"
           onclick="document.getElementById('table1').style.display='block';">
    This assumes, of course, that you have initially set the style of "table1" to "none". That is,
    Code:
    <table id="table1" style="display: none;">
    ...

  • Users who have thanked Old Pedant for this post:

    Cntl_Alt_Del (05-23-2009)

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    <script language="JavaScript"> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.

    Old Pedant - "...but I can't see how the use of the names will ever be slower and could be faster." Yes, that is doubtless right, but we are talking fractions of a millisecond here. A difference which is no real difference.
    Last edited by Philip M; 05-23-2009 at 09:44 PM.

  • #15
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Can i set it back to "hidden" after the user had click on other areas of the site?

    ie: when the user click on the Customer ID or password, the pin pad will disappear again? It will be visible so long as the user click on the Pin textbox.

    CAD


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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