JavaScript刷新而不是更改页面

我无法弄清为什么我的页面不会重定向到设置的页面。只要满足条件，页面就会刷新。我进入了浏览器控制台并粘贴了我的重定向代码，并重定向。JavaScript刷新而不是更改页面

完整的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>

来源

2016-10-02 Sakvad

尝试为每个块添加'return false;'并再次运行该页面。 –

您的验证功能如何被调用？ – Rayon

@Rayon我打电话给这个通过点击一个按钮 – Sakvad

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

来源

2016-10-02 04:22:58 Ouroborus

非常感谢，我不知道关于按钮。为了确保我理解，第二种解决方案的功能完全相同（防止按钮进行默认提交），但采用“更流畅”的方式？ – Sakvad

@Sakvad不仅仅是按钮，而是表单可以提交的所有方式，但用户。（例如，在文本字段中按Enter键也会触发提交事件。） – Ouroborus

JavaScript刷新而不是更改页面

回答

相关问题