提交表单后用文本替换html按钮元素答案

【问题标题】：Replace html button element with text after submitting a form提交表单后用文本替换html按钮元素
【发布时间】：2018-08-21 16:22:41
【问题描述】：

我在主页上有一个按钮，点击它会打开一个模式。我在模态中有一个带有按钮的表单，在提交时会关闭模态并返回到主页。在将模式关闭为纯文本后，我想更改主页上的 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'

【问题讨论】：

你已经做了什么，出了什么问题？请给我们您的代码，我们将帮助您解决此问题。
用纯文本制作一个隐藏的 div 并在 submitForm() 中隐藏按钮并显示 div。
仅供参考 - 这是.innerHTML，而不是.innerHtml 。

标签： javascript html css button modal-dialog

【解决方案1】：

您正在使用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>

【讨论】：

当我为表单添加 onclick 时，它会在我在输入字段中输入任何内容之前呈现
@yer 这是因为只要您单击表单中的任意位置，处理程序就会运行。不要将click 添加到表单中，将其添加到应该触发所有这些的按钮中，就像我展示的那样。

【解决方案2】：

您可以执行类似的操作，将您的按钮替换为包含其文本的 div。

var mainButton = document.getElementById('mainButton');
var buttonText = mainButton.textContent;

var newDiv = document.createElement('div');
newDiv.textContent = buttonText;

document.body.removeChild(mainButton);
document.body.appendChild(newDiv);

【讨论】：

这似乎不起作用，关闭模式时，主页没有被刷新。模态刚刚关闭。