credit card input [Archive] - CodingForums.com

mr_ego

01-23-2003, 10:52 AM

id like a javascript solution so that there are 4 text boxes. when the user enters 4 numbers in the first text box, it then focuses on the next one.

i know this can be done, ive been trying to do it but i havent been successful. can anyone help?

joeframbach

01-23-2003, 01:30 PM

i like that feature. its just about the best thing in M$'s install proccess.

function checkTab(what)
{
if(document.getElementById(what).value.length=4)
document.getElementById("text"+(what.charAt(4)+1)).focus()
}

<input type="text" onKeyDown="checkTab(this.id)" id="text1" />
<input type="text" onKeyDown="checkTab(this)" id="text2" />
<input type="text" onKeyDown="checkTab(this)" id="text3" />
<input type="text" id="text4" />

i hope it works...:(

arnyinc

01-23-2003, 01:39 PM

I might as well put this up also. Mine isn't as dynamic.

<html>
<head>
<script>
function checkamount(box, nextbox){
if (box.value.length == 4)
nextbox.focus();
}
</script>
</head>
<body>
<form name="cc">
<input type="text" size="3" maxlength="4" name="text1" tabindex="1" onkeydown="checkamount(this, document.cc.text2);">
<input type="text" size="3" maxlength="4" name="text2" tabindex="2" onkeydown="checkamount(this, document.cc.text3);">
<input type="text" size="3" maxlength="4" name="text3" tabindex="3" onkeydown="checkamount(this, document.cc.text4);">
<input type="text" size="3" maxlength="4" name="text4" tabindex="4" onkeydown="checkamount(this, document.cc.submitbutton);">
<br>
<input type="submit" tabindex="5" name="submitbutton">
</form>
</body>
</html>

beetle

01-23-2003, 03:39 PM

My answer to this question. I like it because it uses the maxlength attribute to control the tabbing.<script type="text/javascript">

function tabTo( cf, nf )
{
if ( cf.value.length == cf.getAttribute( 'maxlength' ) );
cf.form.elements[nf].focus();
}

</script>

<form name="myForm">
<input type="text" name="cc1" maxlength="4" size="4" onkeyup="tabTo(this,'cc2')">
<input type="text" name="cc2" maxlength="4" size="4" onkeyup="tabTo(this,'cc3')">
<input type="text" name="cc3" maxlength="4" size="4" onkeyup="tabTo(this,'cc4')">
<input type="text" name="cc4" maxlength="4" size="4">
</form>

joeframbach

01-24-2003, 04:09 AM

i like beetles. it has an easy-to-manipulate capability. maybe its that, maybe its that he's a cf nut, i dunno. i like his best.

Shift4Sms

01-24-2003, 07:22 PM

Just keep in mind that the downside to fancy 4-4-4-4 entry field logic like this is that it only works with VISA and MasterCards. American Express for instance, uses a 4-6-5 format and others have their own (Diner's Club, JCB, Discover, etc.).

To make things worse, some card types, Diner's Club for instance, has more than one format so it would complicate any logic to display 4-4-4-4 if VISA or MasterCard is checked, 4-6-5 if AMEX is checked, 4-5-4 OR 5-5-4 if Diner's Club is checked(!). Luckily, Diner's Club is not popular for Internet shopping...