How to hide or remove the search form from the page (Bootstrap 4) on clicking a button?-CodePudding

How can I get this search form and the Search Button to disappear from the page, since it will be replaced by a Thank you message?

<div >
      <div >

        <!-- ## SEARCH FORM ------------------------------------------------ -->
        <form id="search-form"  onsubmit="handleFormSubmit(this)">
          <div >
            <label for="searchtext">Enter your email</label>
          </div>
          <div >
            <input type="text"  style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
          </div>
          <button type="submit" >Search</button>
        </form>
        <!-- ## SEARCH FORM ~ END ------------------------------------------- -->

      </div>
    </div>

I was trying something like:

//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
  google.script.run.withSuccessHandler(createTable).processForm(formObject);
}

function saveData() {
  var searchForm = document.getElementById('search-form')
  var page = document.getElementById("page");
  var table = document.getElementById("dtable");

  //document.getElementById("search-form").reset();
  page.innerHTML = "";
  search-form... = ""//????
  table.innerHTML = "<h4>Thank you!</h4>";
}

CodePudding user response：

You have onsubmit="handleFormSubmit(this) so you better to add your <h4>Thank you!</h4> code inside of handleFormSubmit(), but anyway, you may do it like this:

<div >
  <div >
    <form id="search-form"  onsubmit="handleFormSubmit(this)">
      <div >
        <label for="searchtext">Enter your email</label>
      </div>
      <div >
        <input type="text"  style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
      </div>
      <button type="submit"  id="searchButton" onclick="saveData();">Search</button>
    </form>
  </div>
</div>

<script type="text/javascript">
    function insertAfter(newNode, existingNode) {
      existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function saveData() {
      var searchForm = document.getElementById('search-form');
      var searchButton = document.getElementById("searchButton");

      var thankYouDiv = document.createElement('div');
      thankYouDiv.innerHTML = "<h4>Thank you!</h4>";

      insertAfter(thankYouDiv,  searchForm.lastElementChild);
    }
</script>

CodePudding user response：

var searchForm = document.getElementById('search-form');
var page = searchForm.parentElement;

// Set new result
page.innerHTML =