JavaScript 刷新而不是更改页面

Question

我无法弄清楚为什么我的页面不会重定向到设置的页面。只要满足条件，页面就会刷新。我已经进入浏览器控制台并粘贴了我的重定向代码，它确实进行了重定向。

完整的 JavaScript 函数:

    function formSubmit(){
        var formFN = document.getElementById("fName");
        var formLN = document.getElementById("lName");

        if( formFN.value.length == 0 || formFN.value == null){
            window.alert("Please enter your first name.");
            return false;
        }
        else if( formLN.value.length == 0 || formLN.value == null){
            window.alert("Please enter your last name.");
            return false;
        }
        else
        {
            document.location = "resultPage.html";
            return false;
        }
    }

HTML 部分:

<div id="form">
        <form action="">
        <h3>Thanks for visiting!</h3>
            <label for="fName">First Name:</label>
            <input type="text" id="fName" value="">
            <br>
            <label for="lName">Last Name:</label>
            <input type="text" id="lName" value="">
            <br>
            <button onclick="formSubmit();">
                Submit
            </button>
            <!-- <input type="submit" value="Submit" onclick="formSubmit();"> -->
        </form>
    </div>

Answer 1

默认情况下，button元素具有 type 属性 submit。根据您的问题，您可能需要这个:

<button type="button" onclick="formSubmit();">
     Submit
</button>

如果您想要一个更通用的解决方案，最好捕获并处理表单上的 submit 事件，因为在 input 中按 return 等事件会触发也提交。

window.addEventListener("load", function() {
    document.getElementById("form").getElementsByTagName("form")[0].addEventListener("submit",function(event) {
        event.preventDefault(); // Stop the normal action for this event

        var formFN = document.getElementById("fName");
        var formLN = document.getElementById("lName");

        if( formFN.value == null || formFN.value.length == 0 ){
            alert("Please enter your first name.");
        }
        else if( formLN.value == null || formLN.value.length == 0 ){
            alert("Please enter your last name.");
        }
        else {
            document.location = "resultPage.html";
        }
    });
});

<div id="form">
    <form>
    <h3>Thanks for visiting!</h3>
        <label for="fName">First Name:</label>
        <input type="text" id="fName" value="">
        <br>
        <label for="lName">Last Name:</label>
        <input type="text" id="lName" value="">
        <br>
        <button>Submit</button>
    </form>
</div>

编辑:我认为您应该在检查长度之前检查是否为空。 (如果 .value 为 null，则检查 .value.length 将引发错误。)相应调整代码。