试图理解表单的工作原理以及为什么document.location.href不起作用

时间:2015-11-09 09:15:22

标签: javascript html forms

scripts.js中

function homepageInput() {
    var x = document.getElementById('homeForm').elements["whatdoyouwant"].value;
    if(x.localeCompare("working") == 0){
        document.location.href = 'new.html';
    }
}

的index.html

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <div class= "boxContainer">
        <div id = "box">
            <form id="homeForm" onsubmit="homepageInput()">
                <input type="password" name="whatdoyouwant" id="whatdoyouwant" placeholder="WTF..."/>
                <input id="submit" type="submit"/>
            </form>
        </div>
    </div>
</body>
</html>

当我在我的密码字段中输入“working”时,它不会加载位于同一目录中的页面new.html。有任何想法吗?当我在同一个if语句中使用警报时它加载正常吗?

1 个答案:

答案 0 :(得分:0)

您在提交表单时触发该功能。

您无法阻止表单的默认行为。

因此,您设置location.href,然后运行表单提交,并将表单提交到当前网址。

解决这个问题的快速入侵是来自你的onsubmit函数的return false

现代代码会绑定事件处理程序with JavaScript并使用preventDefault()