Question

I have a popup dialog in my page which has like 20 fields. The 20 fields can be modified and any change to the dialog will be updated to the server.

Only in IE8, the field values are set to null when the user tries to clear the fields and save the content.

It seems like Serializing the value of empty DOM elements using IE8’s native JSON.stringfy function was returning "null" (string) instead of ""

DEMO: http://jsfiddle.net/6VKzy/2/ [Open in IE8]

More details about the issue from blog,

With native JSON support enabled in IE8, users can now take advantage
of the built-in JSON.stringify and JSON.parse methods to serialize and
deserialize JScript values to JSON text and vice versa. However, there
is a known issue in IE8’s native JSON implementation, wherein if a
user tries to read the value of an empty DOM element, and serialize
the same using native JSON, the result is not the same as a user would
expect while serializing “”.

http://blogs.msdn.com/b/jscript/archive/2009/06/23/serializing-the-value-of-empty-dom-elements-using-native-json-in-ie8.aspx

Note: This question is self answered.

Answer 1

The fix is to use the censor function like below to return "" instead of "null".

function(k, v) { return v === "" ? "" : v }

Fixed DEMO: http://jsfiddle.net/6VKzy/3/ [Open in IE8 to verify the fix]

More details and different approaches to the fix in the blog,

This is a bug in the production version of IE8. The problem here is
that within the DOM a special encoding is used to represent a missing
string value. Even though this special value is different from the
encoding of the JScript literal “”, throughout the JScript
implementation the value is treated as being === to “”, except for a
specific case in JSON.stringify.

Since this special value only originates from accesses to DOM objects,
a workaround would be to explicitly censor them on every DOM access
that might return one.

http://blogs.msdn.com/b/jscript/archive/2009/06/23/serializing-the-value-of-empty-dom-elements-using-native-json-in-ie8.aspx