javascript - 类型错误 : Undefined form element in FireFox only

Question

出于某种原因，我只在 FireFox 中遇到错误:

Typeerror: document.forms.myCity.optionname is undefined

该脚本适用于所有其他浏览器:

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

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

}

这个脚本在header中，以这种形式执行:

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

<?php

  function get_terms_dropdown($taxonomies, $args){

    $myterms = get_terms($taxonomies, $args);

    $optionname = "optionname";

    $emptyvalue = "";

    $output ="<select name='". $optionname ."'><option selected='". $selected . "' value='" . $emptyvalue . "'>Select a City</option>'";

    foreach($myterms as $term){

      $term_taxonomy=$term->pa_city; //CHANGE ME

      $term_slug=$term->slug;

      $term_name =$term->name;

      $link = $term_slug;

      $output .="<option name='".$link."' value='".$link."'>".$term_name."</option>";

    }

    $output .="</select>";

    return $output;

  }

  $taxonomies = array('pa_city'); 

  $args = array('order'=>'ASC','hide_empty'=>true);

  echo get_terms_dropdown($taxonomies, $args);

?>

<input type="submit" value="click" name="submit" onclick="WriteCookie()">

</form> 

错误只出现在 FireFox 中，有什么想法吗？

Answer 1

你的错误是这样的:

Typeerror: document.forms.myCity.optionname is undefined

我认为问题在于此元素:

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

看起来表单使用了 id选择器而不是 name选择器。我以前遇到过这个问题，我通过同时放置 id 来解决它和 name进入<form>元素。我能找到的唯一明确的在线引用是 here from the MSN XHTML Standards page :

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

我也是found a discussion thread here在 XHML 1.1 严格的标准和形式上也引用了它:

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.

然后我找到了this official W3 reference把问题钉在头上；重点是我的:

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.

所以只需添加一个 id像这样为该元素添加属性:

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

您想同时拥有 name和 id其中涵盖了不同浏览器的所有基础及其 XHTML 1.1 标准的实现。

但如果仍然无法正常工作，只需在 id 之上的 JavaScript 中执行此操作即可改变:

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";

}

我把这行改成了这样:

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

变成这样:

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