What's should setting an HTML textbox value to null do?

Question

We have a JSON response which can contain null values (e.g. { myValue: null }) - we assign this value to a textbox on a form: (actually, we use JQuery, but this is equivalent

var nullString = null;
document.getElementById('myInput').value = nullString;

If we assign this value to an HTML textbox value, the behaviour seems browser-dependent:

• Firefox and Chrome both display an empty text box, and when you read 'value' back you get null.

• IE puts the string 'null' into the text box, and when you read 'value' back, you get the string "null" (i.e. setting 'value' and reading it back has modified the data)

(It's here: http://jsbin.com/uleno/edit if anyone wants to try it)

Which browser is doing the right thing here, or is this undefined behaviour? And is there a cleverer more elegant workaround than doing a lot of (myValue == null ? '' : myValue) stuff?

Answer 1

Why not use an empty string? First, trim the value. Then check for the empty string.

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
    return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
    return this.replace(/\s+$/,"");
}

Answer 2

I'm not sure my solution will work for you but here's a shot at the problem, which I must admit is new to me. Its main advantage is that it won't clutter code and that you'll have a single place that handles this logic. This is IE specific as far as I know.

var input = document.getElementById('myInput');

if (input.attachEvent) {
    input.attachEvent("onpropertychange", function() {
        var event = window.event;

        if (event.propertyName === "value" && event.srcElement.value === "null") {
            event.srcElement.value = "";
        }
    });
}

input.value = null;

alert(input.value);

Answer 3

Actually, the simplest thing to do is this:

document.getElementById('myInput').value = nullString || '';

You know that value must gets a string assigned so if its any other 'falsy'* value, you return the empty string.

* null, undefined, 0, false, ''

Answer 4

What's actually happening is the null object is being stringified, like null.toString(). In an alert() message box, the browser usually interprets the object instead of simply stringifying it, so the result will be different. And, of course, browsers (especially IE) interpret and stringify differently.

For what it's worth, there is a logic to returning null when a string is expected. Whatever is returning this value probably does so in order to provide a false value for easy conditional testing, while still indicating that the result is empty rather than, eg undefined. DOM methods that return collection objects do the same. Further, while an empty string literal ('') is a false value, an empty String object (new String('')) is not; and the latter can be created from the former accidentally with further processing. So the "safe" way to prevent the consuming code from accidentally discarding a valid string is to return a string literal or String object in one case, and null in another.