Home/ Questions/Q 7781565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T19:16:06+00:00

When a user puts in some text into my form and clicks the button,

  • 0

When a user puts in some text into my form and clicks the button, I want to hide the form and show a “thanks” message to the user to let them know I got their text.

By the way, this is for embedding into a Chrome extension pop-up.

Here’s what I have:

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

The problem is that the form reappears after the button is clicked. I have noticed that the functionality slightly changes when I put in the required attribute into the input field.

I’m using the latest version of Chrome for Mac.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The form is reloading because the page is reloading, try returning false from your submit.

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

    Edit

    Ah, sorry about that. So the page isn’t reloading?

    Perhaps try this instead:

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

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