全局變量未從函數中更新

Question

我正在創建一個簡單的表單，用戶可以在其中設置小時數。 通過javascript驗證，它檢查表單中是否有值。 最初，全局變量“ userInputHours”設置為0。

當用戶完全填寫表單中填寫內容的必要條件時，在函數“ validation（）”中，驗證將轉到“ else”，並應更新全局變量“ userInputHours”。

最后，HTML信息框應更新用戶輸入時間。

問題是什么？ 我無法讓用戶表單輸入值停留在HTML信息框中（可見時間不到一秒鍾，然后它被原始值“ userInputHours”覆蓋）。

我知道一些答案將表明我應該使用AJAX，但這是為了解決僅部分頁面被重新加載的問題。 使用AJAX不能解決我的問題基礎。

方案和有效/無效：

---

方案1：在“小時”表單字段中輸入數字，然后按“提交1”按鈕：

---

作品：控制台日志打印“您添加：[您以HTML格式添加的數字]。

不起作用：從控制台本身運行console.log（userInputHours）會返回原始值[0]，而不是用戶添加的值。 注意！ 在很短的時間內（不到一秒鍾），您實際上會在HTML表單中看到用戶值，但是會被原始值覆蓋。

所需的結果：在HTML信息框中，應顯示用戶添加的數字。

---

方案2：按Submit-2調用函數“ outsideValidation（）”，該函數將“ userInputHours”設置為5：

---

Works：全局變量“ userInputHours”正在從函數內更新。 console.log（userInputHours）確認全局變量已更新。 HTML信息框將使用更新的全局變量值進行更新。

不起作用：由於此測試未連接到用戶表單字段“ hours”，因此無法在“ hours”字段中添加數字並通過HTML信息框對其進行更新。

預期結果：按預期工作。 無法解決所需的完整解決方案。

 // Global variables. var userInputHours = 0; // Validation. function validation() { userInputHours = document.getElementById("userInputHours").value; // Works /* Validates blank fields */ if (userInputHours == "") { console.log("A field is left blank"); // Works alert("Please fill in all fields!") // Works return false; } else { console.log("You added: " + userInputHours); // Works // You see added value for a very short moment. The it returns to the original glbal value. document.getElementById("info-box-text").innerHTML = userInputHours; // Does not work. return true; } } /* Not part of validation. Connected to button "submit-2" */ function outsideValidation() { userInputHours = 5; document.getElementById("info-box-text").innerHTML = userInputHours; // Works but is disconnected from HTML form user input. } /* Not part of function. Only run when saving the script. */ document.getElementById("info-box-text").innerHTML = userInputHours; // Works by save the script. 

 .box-1 { background-color: white; width: 100px; height: 100px; } #userInputHours { width: 100px; } #submit-1, #submit-2 { height: 60px; } 

 <form onsubmit = "return validation();"> Hours:<br /> <input id="userInputHours" type="text" name="hours" value=""><br /><br /> <input id="submit-1" type="submit" value="Submit-1 (inside form)"><br /><br /> <!-- Submit button --> </form> <br /> <input id="submit-2" type="submit" value="Submit-2 (outside form)" onclick="outsideValidation()"> <br /><br /> <div id="info-box-title" class="info-box-title">Info-box - (you have set hours to):<br /></div> <div id="info-box-text" class="info-box-text"></div> 

Answer 1

validation的返回值由瀏覽器用來確定是否應執行表單提交的默認行為。

如果返回值是true ，那么默認的行為會發生，瀏覽器會提交表單到這是在定義的URL action屬性（如果沒有價值是本作的action屬性，那么它默認為當前的URL）。

提交表單后，您將離開當前頁面並加載新頁面或根據action的值重新加載當前頁面。 因此，與js一起存儲的所有值都將丟失。

如果您不想將數據發送到服務器，則在兩種情況下都必須編寫return false來防止表單提交。