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刷新而不是更改頁面

回答

相關問題