提交後隱藏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輸入表單並隱藏

回答

相關問題