HTML5输入表单在提交并隐藏后重新出现

HTML5 Input Form Reappears after Submit and Hide

本文关键字：隐藏 新出现 提交 输入 表单 HTML5      更新时间：2023-09-26

当用户在我的表单中输入一些文本并单击按钮时，我想隐藏表单并向用户显示"谢谢"消息，让他们知道我收到了他们的文本。

顺便说一句，这是为了嵌入到Chrome扩展弹出窗口中。

这是我的：

<!doctype html>
<html>
  <head>
    <title>Extension</title>
    <style>
      body {
        min-width:200px;
        min-height:75px;
        overflow-x:hidden;
      }
      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }
      .visible{
        display:block;
      }
      .invisible{
        display: none;
      }
    </style>
    <script>
      var PopupController = function () {
          this.button_ = document.getElementById('button');
          this.form_ = document.getElementById('userIdForm');
          this.userId_ = document.getElementsByName('userID')[0];
          this.submitThanks_ = document.getElementById('submitThanks');
          this.addListeners_();
      };
      PopupController.prototype = {
          button_: null,
          form_: null,
          userId_: null,
          submitThanks_: null,
          addListeners_: function () {
              this.button_.addEventListener('click', this.handleClick_.bind(this));
          },
          handleClick_: function () {
              console.log("Submit button clicked");
              var userId = this.userId_.value;
              // Hide the form
              this.form_.classList.add('invisible');
              this.submitThanks_.classList.remove('invisible');
          }
      };
    </script>
  </head>
  <body onload="window.controller = new PopupController()">
    <h2 class="invisible" id="submitThanks">Thanks!</h2>
    <div id="userIdForm">
      <form>
        <input type="text" name="userID" placeholder="User ID" required/>
        <button id="button" type="submit">Submit</button>
      </form>
    </div>
  </body>
</html>

问题是，单击该按钮后，表单会重新出现。我注意到，当我在输入字段中输入required属性时，功能会略有变化。

我正在使用最新版本的Chrome for Mac。

这是因为您的按钮是一个"提交"按钮。因此，当你点击它时，它会执行它的标准行为，即提交表单。它会发出HTTP请求，然后刷新你的页面。如果您不希望发生这种情况，只需将按钮类型更改为"按钮"即可。

表单正在重新加载，因为页面正在重新加载。请尝试从提交中返回false。

<button id="button" type="submit" onclick="return false;">Submit</button>

编辑

啊，很抱歉。所以页面没有重新加载？

也许可以试试这个：

      handleClick_: function () {
          console.log("Submit button clicked");
          var userId = this.userId_.value;
          // Hide the form
          this.form_.className = "invisible";
          this.submitThanks_.className = "visible";
相关文章：