时间戳

首页 > 解决方案 > 提交表单后用文本替换html按钮元素

javascript - 提交表单后用文本替换html按钮元素

问题描述

我在主页上有一个按钮，单击它会打开一个模式。我在模式中有一个带有按钮的表单，在提交时会关闭模式并返回到主页。我想在将模式关闭为纯文本后更改主页上的 html 按钮。模式关闭后如何替换主页中的主按钮？

function submitForm() {
  alert('yes');
  var button = document.getElementById('mainButton');
  button.style.display = 'none';
}
<body>
  <button id="mainButton"> Click here </button>
  <div class="modal">
    <form onsubmit="submitForm()">
      <input type="text">
      <button> Done </button>
    </form>
  </div>
</body>

我在 submitForm 函数中尝试了以下内容：

像这样删除按钮：

document.getElementById('mainButton').innerHTML = '';

还尝试过： document.getElementById('mainButton').style.display = 'none'

标签： javascripthtmlcssbuttonmodal-dialog

解决方案

您正在使用一个submit按钮（这是您使用的默认按钮类型<button>）。因此，当您单击它时，onsubmit事件处理程序会触发并提交表单，这会导致当前页面被卸载，因此尝试显示其他任何内容都行不通。

在这种情况下，您需要将表单重定向到具有您想要的内容的另一个页面（这是通过配置form元素的action属性来完成的。

如果您真的不需要向服务器提交数据，那么您可以将您必须的按钮类型更改为常规按钮，button并将事件处理程序更改为仅处理一个click事件，然后将您已经在做的事情提升到一个新的水平.

除了隐藏您不再希望看到的内容之外display:none，您还可以显示一些提前设置并默认为的display:none内容，然后将其更改为该显示display:block的时间。

function submitForm() {
  alert('yes');
  var button = document.getElementById('mainButton');
  button.style.display = 'none';
  
  // Remove the class that hides the element that you want to now see
  document.querySelector(".afterClick").classList.remove("afterClick");
}
.afterClick { display:none; } /* Defaults to hidden */
<body>
  <button id="mainButton"> Click here </button>
  <div class="afterClick">Thanks!</div>
  <div class="modal">
    <form onclick="submitForm()">
      <input type="text">
      <button type="button"> Done </button>
    </form>
  </div>
</body>

推荐阅读