全局变量不会从函数中得到更新。

Question

我正在创建一个简单的表单，用户可以在其中设置时间。通过javascript验证，它检查表单中是否有一个值。最初，全局变量"userInputHours“设置为0。

在函数“variable ()”中，当用户填写了填入表单中某些内容所需的条件时，验证将转到“of”，并应更新全局变量"userInputHours“。

作为最后一步，HTML信息框应该更新用户输入小时。

有什么问题？I无法让用户表单输入值保持在HTML框中(它在不到一秒内可见，然后被原始值“userInputHours”覆盖)。

我知道一些答案表明我应该使用AJAX，但这是为了解决页面中只有部分被重新加载的问题。使用AJAX并不能解决问题的根本。

场景和工作/不工作的内容：

场景-1：在表单字段“时数”中输入数字，然后按下按钮"submit-1"：

工作：控制台日志打印“您添加了:在HTML中添加的数字”。

不工作:从控制台本身运行console.log(userInputHours)的返回原始值，而不是用户附加值。注意！在很短的时间内，您实际上在HTML表单中看到了用户值，但是要被原始值覆盖。

想要的结果：在HTML框中，用户添加的数字应该显示出来。

场景-2：按submit-2调用函数"outsideValidation()"，将"userInputHours“设置为5：

工作：全局变量"userInputHours“正在从函数中更新。console.log(userInputHours)确认全局变量已被更新。HTML信息框正在使用更新全局变量值进行更新。

不工作：因为这个测试没有连接到用户表单字段“小时”，所以它不能在“小时”字段中添加一个数字，并在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，则会发生默认行为，浏览器将向action属性中定义的URL提交表单(如果action属性没有值，则默认为当前url)。

通过表单提交，您将离开当前页面并加载一个新页面，或者根据action的值重新加载当前页面。因此，与js一起存储的所有值都丢失了。

如果不希望将数据发送到服务器，则必须在这两种情况下编写return false，以防止表单提交。