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元素有一个submit属性type。根据你的问题，你可能想要这个：

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

如果你想要一个更通用的解决方案，你会更好捕捉和形式处理，因为事物的submit事件就像一个input按回车键会也会触发提交。

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将发生错误。）相应地调整后的代码。