Question

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

顺便说一句，这是嵌入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>

问题是单击按钮后表单会重新出现。我注意到当我将所需属性放入输入字段时，功能稍有变化。

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

Answer 1

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

Answer 2

表单正在重新加载，因为页面正在重新加载，请尝试从提交中返回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";

提交和隐藏后，HTML5输入表单重新出现

2 个答案:

提交和隐藏后，​​HTML5输入表单重新出现

2 个答案:

提交和隐藏后，HTML5输入表单重新出现