全局变量未从函数内更新答案

【问题标题】：Global variable is not getting updated from within a function全局变量未从函数内更新
【发布时间】：2018-05-31 09:58:35
【问题描述】：

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

在函数“validation()”中，当用户满足填写表单所需的条件时，验证会转到“else”，并且应该更新全局变量“userInputHours”。

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

有什么问题？我无法让用户表单输入值停留在 HTML 信息框上（它可见不到一秒钟，然后被原始值覆盖”用户输入时间”）。

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

场景以及哪些有效/无效：

场景 1： 在表单字段“小时”中输入数字并按下按钮“提交-1”：

作品： 控制台日志打印“您添加：[您在 HTML 表单中添加的数字]。

不起作用： 从控制台本身运行 console.log(userInputHours) 返回原始值 [0] 而不是用户添加的值。笔记！在很短的时间内，不到一秒钟，您实际上会在 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>

【问题讨论】：

“您会在很短的时间内看到附加值。它返回到原始的 glbal 值。” - 大约有 10 种情况下，这仅意味着浏览器以正常方式提交您的表单，因此页面只是“重新加载”。在这种情况下，由于您从验证函数内部返回 true，因此在这种情况下，这也是意料之中的。
return true 在document.getElementById("info-box-text").innerHTML = userInputHours; // Does not work. 之后告诉浏览器，它可以提交表单，所以它会设置innerHTML，它会在短时间内可见，直到浏览器能够提交数据。因为没有指定action属性，所以提交的目标url就是当前url，重新加载页面。那么在这种情况下你要不要把数据提交给服务器呢？
在这个特定的测试中，我不需要将数据提交到服务器。该代码是javascript数字时钟警报的一部分。基本上，用户应该能够添加“HH-MM-ss”，并且应该将其发送到 HTML“信息框”的原因是确认用户设置警报的时间。
然后将return true 更改为return false，一切都会按预期工作。如果您想将其发送到服务器并保留信息，那么您需要使用 ajax 发送数据，同时保留在页面上。或者服务器已经提交了您需要的所有信息以及对表单提交的响应。
@t.niese：您的建议有效。您能否详细说明一下如何将其设置为“return false”的工作原理。我的理解是，通常会触发“返回真”。如果您创建答案，我可以批准它作为我的问题的解决方案。

标签： javascript ajax validation

【解决方案1】：

validation 的返回值被浏览器用来确定是否应该执行表单提交的默认行为。

如果返回值为true，则默认行为将发生，浏览器会将表单提交到action属性中定义的URL（如果action属性不存在值则默认为当前 url)。

提交表单后，您将离开当前页面并加载新页面或重新加载当前页面，具体取决于action 的值。也正因为如此，所有用 js 存储的值都丢失了。

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

【讨论】：