split() and copying from one form field to another

Greetings!

I am retro-fitting a Point of Sale system and I have run into a problem with splitting out information entered in one form field and parsing it into 3 others. This works just fine in FireFox but not IE. (I get "object expected"...)

The purpose here is when the card is swiped in the system, and they hit the tab key on the keyboard, the string that the card enters is split into Card number, Name, Expiration Date.

(I found a script online and modified it to fit the existing form, I do understand the code, but in the spirit of full disclosure I didn't write it from scratch.)

This works just fine in Firefox, but IE won't grab the name - only the Number and ExpDate.

Any suggestions?

Here is the JavaScript:



function popfield() {

var pmtCreditCard = document.getElementById('pmtCreditCard');
var PMTCREDITCARDEXPIRATION = document.getElementById('PMTCREDITCARDEXPIRATION');
var ccCvv = document.getElementById('ccCvv');
var PmtFirstName = document.getElementById('PmtFirstName');
var PmtLastName = document.getElementById('PmtLastName');



var pieces = pmtCreditCard.value.split('^');
if( pieces.length >= 3 ) {
var cardNumber = pieces[0];
var name = pieces[1];
var exp = pieces[2];

pmtCreditCard.value = cardNumber.substr(2,(cardNumber.length-1));
PMTCREDITCARDEXPIRATION.value = exp.substr(2,2) + exp.substr(0,2);

namepieces = name.split('/');
var l = namepieces[0];
var f = namepieces[1];

PmtFirstName.value = f;
PmtLastName.value = l;

ccCvv.focus();
}

}


The html form is:

<input type="text" name="pmtCreditCard" id="pmtCreditCard" onChange="popfield();" onblur="popfield();" class="POS_inputtext200left_blue"/><br />

Exp. Date: <br />
<input type="text" name="PMTCREDITCARDEXPIRATION" id="PMTCREDITCARDEXPIRATION" /><br />

Cardholder First Name:<br />
<input type="text" name="PmtFirstName" id="PmtFirstName" /><br />

Cardholder Last Name:<br />
<input type="text" name="PmtLastName" id="PmtLastName" /><br />

CVV Code:<br />
<input type="text" name="ccCvv" size="5" id="ccCvv"/><br />


TIA!
-Sunshine

So what debugging have you done???

I would think that, at a minimum, you'd do this:

...
alert("raw value::" + pmtCreditCard.value + "::");
var pieces = pmtCreditCard.value.split('^');
alert( pieces.length + " pieces found");

if( pieces.length >= 3 ) {
var cardNumber = pieces[0];
var name = pieces[1];
var exp = pieces[2];
alert("raw cardNumber ::" + cardNumber + "::\nname ::" + name + "\nexp ::" + exp + "::");
pmtCreditCard.value = cardNumber.substr(2,(cardNumber.length-1));
PMTCREDITCARDEXPIRATION.value = exp.substr(2,2) + exp.substr(0,2);

namepieces = name.split('/');
alert("number of namepieces: " + namepices.length);
var l = namepieces[0];
var f = namepieces[1];

PmtFirstName.value = f;
PmtLastName.value = l;

ccCvv.focus();
}


Run that in both FF and IE and see what the differences are.

The debugging I had done was limited to JSLint, Firebug and MSFT's debugger.

I ran this through both browsers, but the results are the same - the raw string comes out correctly, there are 3 pieces found, the name has 2 pieces.. but in IE they are not put into the respective form fields.

So what did I miss?

Thanks!

Update: I stripped the JavaScript and the form out of the other things on that page and tested it by itself - no problems.

I also noticed that the name variables were being passed in both browsers. Further investigation showed that there were some hidden fields further down the page with the same field names. I'm not sure why the hidden fields were being populated with the data instead of the other ones (document hierarchy?) but anyway...

I removed the hidden fields and all is well.

And, I learned a new debugging trick.

Thanks!
Susan