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 class="row">
<div class="col">
<!-- ## SEARCH FORM ------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Enter your email</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
</div>
<button type="submit" class="btn btn-primary mb-2">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>";
}
Advertisement
Answer
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 class="row">
<div class="col">
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Enter your email</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
</div>
<button type="submit" class="btn btn-primary mb-2" 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>