HTML5-Eingabeformular erscheint nach Senden und Ausblenden

Wenn ein Benutzer etwas Text in mein Formular einfügt und auf die Schaltfläche klickt, möchte ich das Formular ausblenden und eine "Danke" -Nachricht an den Benutzer senden, um sie wissen zu lassen, dass ich ihren Text erhalten habe .HTML5-Eingabeformular erscheint nach Senden und Ausblenden

Dies ist übrigens für das Einbetten in ein Chrome-Erweiterungspopup.

Hier ist, was ich habe:

<!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>

Das Problem ist, dass das Formular erneut angezeigt, nachdem die Schaltfläche geklickt wird. Ich habe festgestellt, dass sich die Funktionalität leicht ändert, wenn ich das gewünschte Attribut in das Eingabefeld einfüge.

Ich verwende die neueste Version von Chrome für Mac.

Quelle

2012-03-30 Miles

Das Formular wird neu geladen, weil die Seite neu geladen wird. Versuchen Sie, false von Ihrem Senden zurückzugeben.

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

bearbeiten

Ah, sorry darüber. Also wird die Seite nicht neu geladen?

Vielleicht versuchen Sie stattdessen:

 handleClick_: function() { 
      console.log("Submit button clicked"); 
      var userId = this.userId_.value; 

      // Hide the form 
      this.form_.className = "invisible"; 
      this.submitThanks_.className = "visible";

Quelle

2012-03-30 16:36:02

Das ist eine gute Idee, danke. Aber ich habe es versucht und es gibt für mich keine Verhaltensänderung. – Miles

@Miles - Siehe bearbeiten für eine andere Idee. –

Travis, vielleicht hast du einen Tippfehler in deiner Antwort. Ich habe es in "Return false" geändert. (nahm das :) und es hat funktioniert. Vielen Dank! Ich gebe dir die Antwortpunkte, weil du zuerst geantwortet hast. – Miles

Dies liegt daran, Ihre Schaltfläche eine Schaltfläche „Senden“ ist. Wenn Sie darauf klicken, wird das Standardverhalten des Formulars übernommen. Es macht eine HTTP-Anfrage und Ihre Seite wird aktualisiert. Wenn Sie dies nicht möchten, ändern Sie einfach den Schaltflächentyp zu "button".

Quelle

2012-03-30 16:43:12

Die angegebene Seite wurde nicht neu geladen, aber ich wäre gespannt, ob dieser Ansatz auch funktioniert, indem ich den Button zu '

Das funktioniert, da das Problem darin bestand, dass das Formular übergeben wurde und die Seite aktualisiert wurde. Es ist eine Weile her, seit ich manuelle Sachen mit Formularen gemacht habe und ich habe vergessen, dass die Seite beim Senden von Formularen aktualisiert wird. Vielen Dank! – Miles

Froh für Sie, schade, dass Sie die andere Antwort als die gute markiert :) –

HTML5-Eingabeformular erscheint nach Senden und Ausblenden

Antwort

Verwandte Themen