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?
JavaScript
x
18
18
1
<div class="row">
2
<div class="col">
3
4
<!-- ## SEARCH FORM ------------------------------------------------ -->
5
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
6
<div class="form-group mb-2">
7
<label for="searchtext">Enter your email</label>
8
</div>
9
<div class="form-group mx-sm-3 mb-2">
10
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
11
</div>
12
<button type="submit" class="btn btn-primary mb-2">Search</button>
13
</form>
14
<!-- ## SEARCH FORM ~ END ------------------------------------------- -->
15
16
</div>
17
</div>
18
I was trying something like:
JavaScript
1
5
1
//HANDLE FORM SUBMISSION
2
function handleFormSubmit(formObject) {
3
google.script.run.withSuccessHandler(createTable).processForm(formObject);
4
}
5
JavaScript
1
11
11
1
function saveData() {
2
var searchForm = document.getElementById('search-form')
3
var page = document.getElementById("page");
4
var table = document.getElementById("dtable");
5
6
//document.getElementById("search-form").reset();
7
page.innerHTML = "";
8
search-form = ""//????
9
table.innerHTML = "<h4>Thank you!</h4>";
10
}
11
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:
JavaScript
1
30
30
1
<div class="row">
2
<div class="col">
3
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
4
<div class="form-group mb-2">
5
<label for="searchtext">Enter your email</label>
6
</div>
7
<div class="form-group mx-sm-3 mb-2">
8
<input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
9
</div>
10
<button type="submit" class="btn btn-primary mb-2" id="searchButton" onclick="saveData();">Search</button>
11
</form>
12
</div>
13
</div>
14
15
<script type="text/javascript">
16
function insertAfter(newNode, existingNode) {
17
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
18
}
19
20
function saveData() {
21
var searchForm = document.getElementById('search-form');
22
var searchButton = document.getElementById("searchButton");
23
24
var thankYouDiv = document.createElement('div');
25
thankYouDiv.innerHTML = "<h4>Thank you!</h4>";
26
27
insertAfter(thankYouDiv, searchForm.lastElementChild);
28
}
29
</script>
30