表单提交后全局变量userInputHours更新值无法保留的问题

嘿，这问题我太熟了——表单提交的默认刷新行为在搞破坏！

你遇到的核心问题是：当点击表单里的submit-1按钮时，浏览器会触发表单的默认提交动作——也就是刷新整个页面。页面一刷新，所有全局变量都会被重新初始化，你刚赋值的userInputHours自然又变回初始值0了，这就是为什么info-box里的输入值只闪一下就消失，控制台直接打印userInputHours也还是0。

而场景2里的submit-2没问题，是因为它不在表单内部，点击它不会触发表单的默认提交，页面不会刷新，所以全局变量能保持修改后的值。

下面给你两种简单的解决方法，直接改现有代码就行：

方法1：阻止表单的默认提交行为 #

修改你的HTML和JavaScript，让表单验证通过后不刷新页面：

修改HTML的form标签 #

把onsubmit的调用改成传递事件对象：

<form onsubmit="return validation(event);">

修改JavaScript的validation函数 #

在验证通过时，用event.preventDefault()阻止页面刷新：

// Global variables.
var userInputHours = 0;

// Validation.
function validation(event) {
  userInputHours = document.getElementById("userInputHours").value;
  /* Validates blank fields */
  if (userInputHours == "") {
    console.log("A field is left blank");
    alert("Please fill in all fields!")
    return false;
  } else {
    console.log("You added: " + userInputHours);
    document.getElementById("info-box-text").innerHTML = userInputHours;
    // 阻止表单默认提交（关键！）
    event.preventDefault();
    return false; // 也可以直接return false，同样能阻止默认行为
  }
}

/* 其他函数保持不变 */
function outsideValidation() {
  userInputHours = 5;
  document.getElementById("info-box-text").innerHTML = userInputHours;
}

// 页面加载时初始化显示
document.getElementById("info-box-text").innerHTML = userInputHours;

方法2：把submit按钮改成普通按钮 #

如果不需要表单的提交功能（比如只是做前端验证和显示），可以直接把submit-1的类型改成button，这样点击它就不会触发表单提交：

修改HTML的submit-1按钮 #

<input id="submit-1" type="button" value="Submit-1 (inside form)" onclick="validation()">

调整JavaScript的validation函数 #

不需要再返回true/false，因为现在只是普通按钮的点击事件：

function validation() {
  userInputHours = document.getElementById("userInputHours").value;
  if (userInputHours == "") {
    console.log("A field is left blank");
    alert("Please fill in all fields!")
  } else {
    console.log("You added: " + userInputHours);
    document.getElementById("info-box-text").innerHTML = userInputHours;
  }
}

两种方法都能解决你的问题，选哪种看你后续是否需要表单的提交功能（比如给后端发数据）。如果之后要发数据，方法1更合适，阻止默认行为后还可以用AJAX异步提交；如果只是前端交互，方法2更简单。

内容的提问来源于stack exchange，提问作者Toolbox