Question

我正在尝试创建一个简单的复选框和按钮，用于验证用户是否已阅读过TOS。出于某种原因，我的代码不起作用。页面加载，但按下按钮没有所需的效果。 Firebug说我没有错误，所以我觉得我误解了某些东西的运作方式。谁能解释我在这里做错了什么？我还是Javascript的新手。

<html>
<head>
<script language="javascript" type="text/javascript">
function validateForm()
{
    if(document.getElementById("TOSbox").checked)
    {
       window.location.href = "/give.html";
    }
    else
    {
        document.getElementById("TOSWarning").innerHTML="You need to agree to the TOS first.";
    }
}
</script>
</head>
<body>
    This is where the TOS goes.
    <br>
    <form name="TOSform" action="">
        <input type="checkbox" name="TOSbox" value="checked">I have read and agree to the Terms of Service.<br>
        <button onclick="validateForm()">I Agree</button> 
    </form>
    <p id="TOSWarning"></p>
</body>
</html>

Answer 1

您的<button>需要type="button"，以便初学者避免提交表单（或在表单无效时返回false）。此外，您使用的是getElementById，但您的复选框没有ID，只有一个名称。尝试：

<input type="checkbox" name="TOSBox" id="TOSbox" value="checked">I have read and agree to the Terms of Service.<br>
<button type="button" onclick="validateForm();">I Agree</button>

Answer 2

您需要返回false以防止默认提交行为。

<button onclick="validateForm(); return false;">I Agree</button>

Answer 3

相关：https://stackoverflow.com/a/10079197/1026459

如果在表单内部没有类型的情况下使用按钮，则其默认类型为“提交”。

考虑使用<button type="button"...>以避免在按下按钮时发布表单。

此外，在您使用的javascript中，您正在寻找id="TOSbox"，但您的复选框实际上仅使用name="TOSbox"。您应该添加id

<input type="checkbox" id="TOSbox" name="TOSbox" value="checked">

使用Javascript Validator时出现问题

3 个答案: