Question

我创建了一个简单的网络应用程序，其中包含2个表单选项，当用户从每个选项中进行选择时，我希望alert显示他们所做出的选择。

我在下面尝试了此操作但是当检查两个表单时，警报显示不。我错过了什么？注意看评论：

 //BELOW IS NOT BEING DISPLAYED BUT SHOULD BE

当前代码：

<!DOCTYPE html>
<html>
<body>

<h1>Calculator</h1>

<p>Select the importance of this:</p>

<form method="get">
  <input type="checkbox" name="Severity" value="negligible"> Negligible<br>
  <input type="checkbox" name="Severity" value="minor"> Minor<br>
</form>

<p>Select the Probability of this:</p>

<form method="get">
  <input type="checkbox" name="Probability" value="improbable"> Improbable<br>
  <input type="checkbox" name="Probability" value="remote"> Remote<br>
  <input type="checkbox" name="Probability" value="occasional"> Occasional<br>

<button onclick= "analyseThis()"> Analyse this </button> <br>



<script>

function analyseThis(){

    var severities = document.getElementsByName('Severity');
   var probs = document.getElementsByName('Probability');

  var severity = undefined;
  for(var i = 0; i < ages.length; i++)
  {
    if(severities[i].checked)
    {
      age = severities[i].value;

    }
  }

   var probability = undefined;
   for(var i = 0; i < probs.length; i++)
   {
      if(probs[i].checked)
      {
        probability = probs[i].value;

      }
    }

   //BELOW IS NOT BEING DISPLAYED BUT SHOULD BE
   alert("Severity is: " + age + "Probability is: " + probability);

}

</script>


</body>
</html>

Answer 1

我会使用JQuery并使用按钮的click功能提交。

以下是一个例子：

$(document).ready(function () {
    $("{form id/class button id/class OR button id/class}").click(function(e) {
        e.preventDefault();
        //perform validation

        //if everything is good...
        $("{form id/class}").submit();
    });
});

Answer 2

发生了一些有趣的事情：

你的函数analyseThis（）被调用，但有一个正在评估时出错。
页面上的表单正在“提交”，因此页面会重新加载你永远不会看到错误。

要防止页面重新加载（以便您可以看到错误），请执行以下操作：

将li对象传递给event hander中的analyseThis（）函数：
```
onclick
```
让你的analyseThis（）接受事件对象，并在其上调用.preventDefault（），以便页面不会重新加载：
```
<button onclick= "analyseThis(event)"> Analyse this </button>
```

执行此操作后，您将在控制台中看到基础错误输出：

function analyseThis(e){
  e.preventDefault()
  // the rest of your function body here....
}

如果您确实希望提交表单，请记住在调试代码后删除ReferenceError: ages is not defined (line 33, col 17) for(var i = 0; i < ages.length; i++)调用。

Answer 3

您的代码中有错误 - 您在循环中检查ages.length，这可能是第一个循环中未定义的（代码中没有ages变量），并且您的代码执行应该停在那里。

在这里使用JSBin代码： http://jsbin.com/yelihugune/1/

Answer 4

您的代码中存在错误。

for(var i = 0; i < ages.length; i++)
{
    if(severities[i].checked)
    {
        age = severities[i].value;

    }
}

'年龄'尚未在您的代码中定义，也不是'年龄'。这将导致错误，阻止您的代码运行。这就是警报没有发生的原因。

声明年龄数组。

Javascript：检查表单时显示警告？

4 个答案: