Internet Explorer, forms, JavaScript and null

Published October 13th, 2006

I don’t know how widely known this one is, but it just caught me out so I thought I’d post it here.

Let’s say you have form with a text input box. Now, let’s say that (for some reason) you decide to use JavaScript to set the value of that input box to null — that is to say, not the string ‘null’ but to a null value (ie. nothing).

In Firefox, the result is that the value of the element is set to an empty string. However, in Internet Explorer (and Opera, and possibly others that I haven’t tested) the value of the box is set to the string ‘null’. So the letters n,u,l and l appear in the text box.

Now I know that a  text box has to have a string value so it can never truly be set to null. But how stupid is it to type cast null to ‘null’? You can’t assume that a string value of ‘null’ is equivalent to a null value, so surely the closest equivalent is an empty string?

Sometimes, goat farming seems like an attractive alternative career.

Get a Trackback link


  1. Dan G. Switzer, II on October 13, 2006

    While Firefox seems like the most practical solution, technically a text field can’t be null. IE is just making it’s best guess at casting the null into something that makes since to a string. Just out of curiousity, I wonder what would happen if you run the toString() method on a variable that is null. I’m guessing IE kicks back the string “null”.

  2. Phantom on October 18, 2006

    Wait until you start to play with IE7 – which I suggest you do NOW, as it’s a high-priority automatic update being released by MS before the end of this month (October 2006).

    So far I have had an Outlook style menu bar completely fail to render in IE7 and NOTHING will fix it. Its a frightening time!

    Start checking and start checking NOW!

  3. gphilip on October 7, 2010

    If you use jQuery, this might help in some cases (and similar to text() and html().

    overrideValToHandleNullIe: function()
    // Store a reference to the original remove method.
    var originalValMethod = jQuery.fn.val;

    // Define overriding method.
    jQuery.fn.val = function(){
    if ( null === arguments[0] )
    arguments[0] = ”;

    // Execute the original method.
    return originalValMethod.apply( this, arguments );

Leave a comment

Comment Policy: First time comments are moderated. Please be patient.