Typeerror: Undefined form element in FireFox only

firefox, javascript

Solution

Your error is this:

Typeerror: document.forms.myCity.optionname is undefined

I believe the issue is in this element:

<form name="myCity" action="http://mywebsite.com/"  method="POST">

It looks like forms use the `id` selector instead of the `name` selector. I ran into this issue before, and I solved it by placing both `id` and `name` into the `<form>` element. The only explicit online reference I can find to this is here from the MSN XHTML Standards page:

The name attribute on the form element is not allowed in XHTML 1.1 guidelines.

I also found a discussion thread here on XHML 1.1 strict standards & forms that makes reference to it as well:

The W3 says the name attribute is deprecated a deprecated part of HTML 4.0 and only the ID tag fits the new XHTML 1.1 standards.

And then I found this official W3 reference that nails the issue on the head; emphasis is mine:

name = cdata [CI] This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.

So just add an `id` attribute to that element like this:

<form name="myCity" id="myCity" action="http://mywebsite.com/"  method="POST">

You want to have both `name` and `id` in there to cover all bases on different browsers and their implementation of XHTML 1.1 standards.

But if somehow that still does not work, just do this instead in your JavaScript on top of the `id` change:

function WriteCookie()
{
    document.cookie = "city" + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    cookievalue = document.getElementById("myCity").optionname.value + ";";

    document.cookie='city='+cookievalue +'; expires=Fri, 3 Aug 2021 20:47:11 UTC; path=/';
    window.location.href = "http://mywebsite.com";

}

I changed the line that read like this:

cookievalue = document.forms['myCity'].optionname.value + ";";

To be this:

cookievalue = document.getElementById("myCity").optionname.value + ";";

Problem

Original source