Question

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

在函数“validation（）”中，当用户满足填写表单中某些内容的必要条件时，验证将转到“else”，并应更新全局变量“userInputHours”。

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

有什么问题？我无法获取用户表单输入值以保留在HTML信息框中（它可见不到一秒钟，然后被原始值覆盖“ userInputHours“）。

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

场景以及有效/无效的内容：

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

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

不起作用：从控制台本身运行console.log（userInputHours）会返回原始值[0]而不是用户添加的值。注意！在很短的时间内，实际上在HTML表单中看到用户值的时间不到一秒，但要被原始值覆盖。

通缉结果：在HTML信息框中，添加的用户数字应该会显示。

场景-2：按提交-2调用函数“outsideValidation（）”，将“userInputHours”设置为5：

Works：正在从函数中更新全局变量“userInputHours”。 console.log（userInputHours）确认全局变量已更新。正在使用update global variabl值更新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，则会发生默认行为，浏览器会将表单提交到action属性中定义的URL（如果没有值存在action属性然后默认为当前网址。

使用表单提交，您将离开当前页面并加载新页面或根据action的值重新加载当前页面。因此，存储在js中的所有值都将丢失。

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

全局变量未在函数

1 个答案: