What is the reason for this error in jQuery/JavaScript function?

Question

When I execute the following JavaScript function I receive the following error:

'2' is null or not an object.

The input from txtRawCardData element is a string containing ^ character which I split into an string array.

Update

I receive this error only when I run my jQuery code in Internet Explorer 7. I do not receive this error when I run it FireFox 3.5.6.

Update 2:

This error is also preventing any JavaScript functions I wrote for any ASP.NET CustomValidator controls from firing.

Sample Input:

%B1234123412341234^JOHNSON/JOCKO^1234123412345700000000123000000?;1234123412341234=123443211234567?

function ProcessCCInfo() {
    var rawData = $('#txtRawCardData').val(); 
    rawData = rawData.replace('\n\r', '');                   
    var CCArray = rawData.split('^');

    //format the card holder name
    var NameArray = CCArray[1].split('/');
    var CCName = NameArray[1] + ' ' + NameArray[0];

    var CCNumber = CCArray[0].replace('%B', '');

    var CCExpiration = CCArray[2].substring(0,4) //this is the line generating the error!
    var FormattedDate = CCExpiration.substring(2,4) + '/' + CCExpiration.substring(0,2);

    $('#spanCardHolderName').attr('innerHTML', CCName);
    $('#spanCCNumber').attr('innerHTML', CCNumber); 
    $('#spanCCExpirationDate').attr('innerHTML', FormattedDate);

    setTimeout("$('#txtCustomerId').focus()", 1000);
}

Anyone know why it threw this error?

Answer 1

The following code works in the firebug console, probably your input value is wrong:

function readCard(){
    var rawData = '%B13241234134^first/last^201111'; 
    rawData = rawData.replace('\n\r', '');                   
    var CCArray = rawData.split('^');

    //format the card holder name
    var NameArray = CCArray[1].split('/');
    var CCName = NameArray[1] + ' ' + NameArray[0];

    var CCNumber = CCArray[0].replace('%B', '');

    var CCExpiration = CCArray[2].substring(0,4) 

return [CCName, CCNumber, CCExpiration]}

readCard()

Answer 2

When you encounter a problem like this, try checking your assumptions. Print out (or alert()) some of the intermediate values, to make sure that they are what you think they are. Try cutting it down to a short example so you can test what kinds of inputs it works with.

Here's an example. I've extracted just the text processing from your function, in order to see if it works:

function test(rawData) {
    rawData = rawData.replace('\n\r', '');                   
    var CCArray = rawData.split('^');

    //format the card holder name
    var NameArray = CCArray[1].split('/');
    var CCName = NameArray[1] + ' ' + NameArray[0];

    var CCNumber = CCArray[0].replace('%B', '');

    var CCExpiration = CCArray[2].substring(0,4) //this is the line generating the error!
    var FormattedDate = CCExpiration.substring(2,4) + '/' + CCExpiration.substring(0,2); 

    return CCName + " " + CCNumber + " " + CCExpiration + " " + FormattedDate;
}

Now, in Firebug or the WebKit inspector or Spidermonkey or the IE 8 JavaScript debugger or any other JavaScript read-eval-print loop you can find, you can try this function out, and test it with different inputs:

> test("12345^Last/First^0102")
"First Last 12345 0102 02/01"
> test("12345^Last/First")
TypeError: Result of expression 'CCArray[2]' [undefined] is not an object.

So, I would guess that you were passing in some kind of string that doesn't have two ^ characters in it. Stick an alert(rawData) right after you fetch it out of the element, and then a alert(CCArray) right before the line where you get the error, and it will let you see what the values are, which could help you figure out what's going on.

Answer 3

remember that the rawData = rawData.replace('\n\r', ''); will only replace the first '\n\r' it encounters and not all of them ...

to replace all use a regular expression with the global flag

rawData = rawData.replace(/(\r\n|[\r\n])/g, '');