为什么点击表单提交后JavaScript展示的姓名会立刻消失？

问题原因 #

• 你使用了type="submit"的提交按钮，表单默认提交行为会在提交后刷新当前页面（你设置的action=""表示提交到当前页面），页面刷新后JS动态修改的DOM内容（也就是显示的姓名）会被重置，所以会出现闪一下就消失的情况。
• 输入框为空时你的函数返回false，会阻止表单默认提交行为，所以alert能正常触发、页面不会刷新；输入正常时你返回了true，默认提交行为没有被阻止，就触发了页面刷新。

解决方法 #

方案1：校验通过后也阻止表单默认提交 #

只需要把输入正常分支的返回值改成false即可，修改后的JS代码如下：

function firstName_lastName() {
   var firstName = document.getElementById('firstName').value;
   var lastName = document.getElementById('lastName').value;
   var names = document.getElementById('names');

  if (firstName == "" || lastName == "") {
   alert('Please fill in all the fields');
   return false; 
  } else {
    names.innerHTML = firstName + " " + lastName; 
    // 这里返回false阻止表单提交，页面就不会刷新
    return false; 
}

方案2：改用普通按钮，移除表单默认提交行为 #

把提交按钮的类型改成button，就不会触发默认的表单提交刷新逻辑：

<!-- 替换原来的submit按钮 -->
<input type = "button" value = "submit" onclick = "firstName_lastName();"/>

这种场景下你也不需要在函数里返回布尔值控制提交行为。

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