the Future of the Web
  • Articles
  • Contact
  • Setting a form field to null or undefined

    Apr 4 2006

    I came across another browser difference while debugging some JavaScript. Let's say you were trying to set the value of a form field the following way:

    document.getElementById('formField').value = someFunction();

    But, it just so happens that someFunction() returns null. What happens when you set a form field value to null? Well, in Firefox and Safari, the value will be set to the empty string, "". Internet Explorer and Opera will set the field to the string "null".

    Similarly, if the function forgot to return a value, the form field would get set to "undefined" (this is the same in every browser).

    The moral of the story is, be careful not to let a form field value get set to null. You could avoid both these situations by doing something like:

    document.getElementById('formField').value = someFunction() || "";

    Note: This would actually replace undefined and null as well as 0 and false with "".

    View 1 Comment | Add a comment
  • Comments

    1. Nancy at 11:56am on November 20, 2009

    I have bunch of textboxes with a save button.
    If I enter a number in my text box and click saves, I am unable to set the field values back to 0 or to 'blank-out' the values entered in the field. If I attempt to do so the system sets the value of the field back to the previous value.
    Any idea why?
    Please help

    Add a Comment

    Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type &lt;em&gt;, people will see &lt;em&gt;.

  • Jesse Skinner

    Jesse Skinner
    • About Me
    • Email Me
    • RSS Feed RSS Icon
    • @JesseSkinner
  • Recent Articles

    • Free eBook: Unobtrusive Ajax
    • Official jQuery Templating Plugin
    • jQuery Live Events
    • buttons need type="submit" to submit in IE
    • Use Arrays in HTML Form Variables
    • 5 Reasons Freelancers Can Succeed in a Shrinking Economy
    • Keeping a Live Eye on Logs
    • Using PHP's empty() Instead of isset() and count()
    • Testing Web Pages with Lynx
    • Stop CSS Background Flickering in Internet Explorer 6
    • See All...
  • Categories

    • javascript (41)
    • about (17)
    • links (17)
    • web (14)
    • html (12)
    • server (11)
    • css (8)
    • browsers (8)
    • carnival (7)
    • work (5)
    • design (4)
    • seo (4)
    • ads (4)
    • standards (4)
    • events (4)
  • Older Articles

    • October 2010
    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007
    • December 2006
    • November 2006
    • October 2006
    • September 2006
    • August 2006
    • July 2006
    • June 2006
    • May 2006
    • April 2006
    • March 2006
    • February 2006
    • January 2006
    • December 2005
    • November 2005
    • October 2005
    • September 2005
    • August 2005
    • April 2005
    • See All...
Copyright © 2012 The Future of the Web