Question

我搜索过高和低，我无法弄清楚为什么此代码适用于Chrome / FF但不适用于IE。

#popupBox_1 { 
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none; border-radius: 10px !important;}

function validateForm() {
    var x = document.forms["myForm"].elements["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

请参阅此处的工作演示：https://www.w3schools.com/code/tryit.asp?filename=FEBA861EAACS

不是IE浏览器适用于Chrome

Answer 1

对于第一个，我建议对不同的元素使用不同的ID

IE中不支持value属性。

elements：HTMLFormElement.elements属性返回FORM元素中包含的所有表单控件的HTMLFormControlsCollection（HTML 4 HTMLCollection），但输入元素的类型属性为image。

您可以使用索引或元素名称或ID来访问特定元素。

因为你有两台收音机：

document.forms["myForm"].elements["fname"]

返回集合（nodelist）而不是值。所以，你必须filter集合：

function validateForm() {
        var x = Array.from(document.forms["myForm"]
           .elements["fname"]).filter(function(ele, idx) {
        return ele.checked;
    });
    if (x.length == 0) {
        alert("Name must be filled out");
        return false;
    }
}

不同的解决方案可以基于不同的选择策略：

[document.querySelector('[name="myForm"] [name="fname"]:checked')][2]

摘录：

function validateForm() {
  var x = document.querySelector('[name="myForm"] [name="fname"]:checked');
  if (x == null) {
      alert("Name must be filled out");
      return false;
  }
}

<form name="myForm" action="/action_page_post.php"
      onsubmit="return validateForm()" method="post">
    <input type="radio" name="fname" id="fname1" value="1">1
    <input type="radio" name="fname" id="fname2" value="2"> 2
    <input type="submit" value="Submit">
</form>

Javascript document.forms值不适用于Internet Explorer

1 个答案: