SubmitおよびHide後にHTML5入力フォームが再表示される

ユーザーがフォームにテキストを入力してボタンをクリックすると、フォームを非表示にしてユーザーに「ありがとう」メッセージを表示して、。SubmitおよびHide後に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>

問題は、ボタンがクリックされた後、フォームが再表示されていることです。私は、入力フィールドに必須の属性を入れると、機能がわずかに変化することに気付きました。

最新のChrome for Macを使用しています。

出典

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

@Miles - 他のアイデアについては編集を参照してください。 –

トラヴィス、あなたの答えにタイプミスがあるかもしれません。私はそれを「偽りに戻す」ように変更した。（:)を取り出し、それは働いた。ありがとう！あなたが最初に答えたので、私はあなたに答えのポイントを与えるでしょう。 – Miles

あなたのボタンは「送信」ボタンであるためです。それをクリックすると、フォームを送信する標準的な動作が行われます。これはHTTPリクエストを作成し、ページが更新されます。これが起こらないようにするには、ボタンの種類を「ボタン」に変更します。

出典

2012-03-30 16:43:12

OPのページがリロードされていませんでしたが、この方法を試してみると、ボタンを '

問題は、フォームが送信されていてページがリフレッシュされていたためです。フォームを使って手作業で作業していたので、しばらくしていました。フォームの送信時にページが更新されるのを忘れてしまいました。ありがとう！ – Miles

あなたのために嬉しい、あまりにもあなたが良いものとして他の答えをマーク悪い:) –

SubmitおよびHide後にHTML5入力フォームが再表示される

答えて

関連する問題