为何表单提交后成功提示仅显示一次？

有一个简易表单，仅First Name、Last Name和Gender为必填字段。填写完成后点击submit按钮，系统会收集输入内容并显示提示信息（例如：Joe Smith has been added.），随后表单重置，提示信息消失。但再次提交时，提示信息不再显示，仅表单会在2500ms后重置。

为何首次提交后，成功提示不再显示？

原代码 #

JavaScript #

const submit = document.querySelector('#addPerson');
const select = document.querySelector('select[name=gender]');
const personAdded = document.querySelector('#successAddPersonMsg');

submit.addEventListener("click", (e) => {
  if (fname.value != "" && lname.value != "" && select.value != "") {
    document.querySelector(
      "#successAddPersonMsg"
    ).innerHTML = `<div class="alert alert-success" role="alert">${fname.value} ${lname.value} has been added!</div>`;

    setTimeout(function() {
      personAdded.style.display = "none";
      addNewPersonForm.reset();
    }, 2500);

    e.preventDefault();
  }
});

HTML #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel blank-panel">
        <div class="panel-body">
          <form action="" name="addNewPersonForm" id="addNewPersonForm">
            <div class="form-group">
              <div class="col-sm-3 m-t">
                <label for="fname" class="is-required">First Name</label>
                <input type="text" id="fname" class="form-control" required>
              </div>
              <div class="col-sm-3 m-t">
                <label for="lname" class="is-required">Last Name</label>
                <input type="text" id="lname" class="form-control" required>
              </div>
              <div class="col-sm-2 m-t">
                <label for="gender" class="is-required">Gender</label>
                <select class="form-control" name="gender" id="gender" required>
                  <option value="" selected>Please Select</option>
                  <option value="1">Female</option>
                  <option value="2">Male</option>
                  <option value="3">Unspecified</option>
                </select>
              </div>
              <div class="col-sm-2 m-t">
                <label for="birthDate" class="control-label">Birth</label>
                <div class="input-group date" id="birthDateDiv">
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                  <input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate">
                </div>
              </div>
              <div class="col-sm-2 m-t">
                <label for="dummy" class="control-label">&nbsp;</label>
                <input class="btn btn-primary form-control" type="submit" id="addPerson" value="Add Person">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-offset-4">
      <div id="successAddPersonMsg"></div>
    </div>
  </div>
</div>

问题根源 #

首次提交后，代码通过personAdded.style.display = "none"将提示容器#successAddPersonMsg设置为隐藏状态，但后续提交时仅更新了容器的innerHTML，并未恢复容器的可见性。也就是说，提示内容其实已经生成，但容器处于隐藏状态，所以看不到。

修复方案 #

方案一：更新提示前恢复容器可见性 #

在设置提示内容前，先将容器的display属性重置为可见状态（比如block）：

// 在设置innerHTML前添加这行
personAdded.style.display = "block";
personAdded.innerHTML = `<div class="alert alert-success" role="alert">${fname.value} ${lname.value} has been added!</div>`;

方案二：清空内容而非隐藏容器 #

将setTimeout中的隐藏容器操作改为清空内容，这样容器始终保持可见：

setTimeout(function() {
  personAdded.innerHTML = ""; // 替换原来的personAdded.style.display = "none"
  addNewPersonForm.reset();
}, 2500);

完整修复后的JavaScript代码 #

const submit = document.querySelector('#addPerson');
const select = document.querySelector('select[name=gender]');
const personAdded = document.querySelector('#successAddPersonMsg');
// 显式获取输入元素，避免依赖全局变量
const fname = document.querySelector('#fname');
const lname = document.querySelector('#lname');

submit.addEventListener("click", (e) => {
  if (fname.value !== "" && lname.value !== "" && select.value !== "") {
    // 恢复容器可见性
    personAdded.style.display = "block";
    personAdded.innerHTML = `<div class="alert alert-success" role="alert">${fname.value} ${lname.value} has been added!</div>`;

    setTimeout(function() {
      // 清空提示内容
      personAdded.innerHTML = "";
      addNewPersonForm.reset();
    }, 2500);

    e.preventDefault();
  }
});

额外优化建议 #

• 避免依赖全局变量：原代码直接使用fname、lname，这是浏览器将DOM元素id自动挂载到全局的行为，存在兼容性和可维护性问题，建议显式通过document.querySelector获取元素。
• 利用原生表单验证：表单元素已经添加了required属性，可以使用form.checkValidity()替代手动的非空判断，简化逻辑：

  submit.addEventListener("click", (e) => {
    const form = document.querySelector('#addNewPersonForm');
    if (form.checkValidity()) {
      personAdded.style.display = "block";
      personAdded.innerHTML = `<div class="alert alert-success" role="alert">${fname.value} ${lname.value} has been added!</div>`;
  
      setTimeout(function() {
        personAdded.innerHTML = "";
        form.reset();
      }, 2500);
  
      e.preventDefault();
    }
  });
  

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