...
PDA

Help on Random No PinPad

Cntl_Alt_Del
05-21-2009, 06:50 PM
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


<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>
Old Pedant
05-22-2009, 12:01 AM
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.
Philip M
05-22-2009, 07:59 AM
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.
Old Pedant
05-22-2009, 08:15 AM
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:

<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:

<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>
Philip M
05-22-2009, 08:42 AM
Somewhat simpler alternative:-

<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?)
Cntl_Alt_Del
05-22-2009, 03:43 PM
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.


Somewhat simpler alternative:-

<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
Cntl_Alt_Del
05-23-2009, 04:10 PM
Dear all,

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

Sincere Thanks
CAD
Philip M
05-23-2009, 05:43 PM
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()">

<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>
cf.canton
05-23-2009, 08:05 PM
Dear all,

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

Sincere Thanks
CADhttp://www.tracker-analytics.com/track/img/3765/s09v0317fvxp/00.gif

I was having the exact same issue. Looks like the solution is below though.
Old Pedant
05-23-2009, 08:48 PM
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 ???


<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.)
Old Pedant
05-23-2009, 08:56 PM
(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.

function fifty( ) { return Math.random() >= 0.5 ? 1 : 0; }

All I had to do to fix it was change to

function fifty( ) { return Math.random() >= 0.5 ? 1 : -1; }


My goof. Works equally well now.
Cntl_Alt_Del
05-23-2009, 09:27 PM
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


<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>
Old Pedant
05-23-2009, 09:34 PM
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:

<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,

<table id="table1" style="display: none;">
...
Philip M
05-23-2009, 09:42 PM
<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.
Cntl_Alt_Del
05-23-2009, 09:43 PM
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
Cntl_Alt_Del
05-23-2009, 09:43 PM
<script language="JavaScript"> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.

Noted with thanks.

CAD
Old Pedant
05-23-2009, 09:44 PM
Sure. Just use

document.getElementById('table1').style.display='none';

in some appropriate place.
Cntl_Alt_Del
05-23-2009, 09:55 PM
Super Super thanks to Old Pedant & Philip M. Finally, i got what i want.

I coming back for more.. Next I will be doing something like "login using the password send via through SMS to our respectively mobile phone."

Lastly, I cant hidden my joy and happiness in having two senior coders in helping me to clear my problem throughout. :thumbsup:

Thanks once again.
CAD

:thumbsup::thumbsup::thumbsup:
Cntl_Alt_Del
05-24-2009, 09:21 AM
Issue solved..
Iresha
06-04-2009, 07:34 AM
Hi Cntl_Alt_Del,

I go through da whole thread and tried this. But still I didn't solved. I cant get the random numbers to appear on the individual pin button. How did u do that?

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


Sorry, I m new to javascripting, hope you guys can help me out.
Old Pedant
06-04-2009, 08:23 PM
Show the full code. Best if you can give us a link to the page, live. If not, show all the relevant code.
Cntl_Alt_Del
02-03-2010, 05:23 PM
Hi guys,

Can i check out what is the main difference between using PHP or Javascript to generate the random number pin pad? Which is better?

Any significant advantage between PHP and javascript?

Rgds
CAD

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum