提交后隐藏HTML5输入表单并隐藏

当用户在我的表单中放入一些文本并点击按钮时，我想隐藏表单并向用户显示一条“谢谢”消息，让他们知道我获得了他们的文本。提交后隐藏HTML5输入表单并隐藏

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

的问题是，当点击该按钮后再次出现的形式。我注意到，当我将所需的属性放入输入字段时，功能会稍微改变。

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

来源

2012-03-30 Miles

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

来源

2012-03-30 16:36:02

这是个好主意，谢谢。但我试过了，行为没有任何变化。 – Miles 2012-03-30 16:40:26

@Miles - 请参阅编辑另一个想法。 – 2012-03-30 16:43:39

特拉维斯，也许你在答案中有一个错字。我将它改为“返回false”。（拿出:)，它的工作。谢谢！我会给你答案，因为你先回答。 – Miles 2012-03-30 16:54:47

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

来源

2012-03-30 16:43:12

OP声明的页面不是重新加载，但我会好奇地看到这种方法也试过，将按钮更改为'

这确实奏效，因为问题在于表单正在提交并且页面正在刷新。自从我用表单完成手动工作已经有一段时间了，我忘记了页面在表单提交时刷新。谢谢！ – Miles 2012-03-30 16:55:33

很高兴为您服务，太差了，您将其他答案标记为好:) – 2012-03-30 17:39:33

提交后隐藏HTML5输入表单并隐藏

回答

相关问题