I am trying to hide form upon onsubmit and display result table. But whenever I click onsubmit, everything will be gone and my table would not show. Could someone be kind to enlighten me as I am new to html, css and javascript? Thank you
JS
function onFormSubmit() {
var formData = readFormData();
insertNewRecord(formData);
document.getElementById('catalogform').style.display='none';
document.getElementById('employeeList').style.display='block';
}
HTML
<div class="container">
<form name="catalogform" id = "catalogform" method="GET" onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div class="item">
<label for="whendate"><b>When</b></label>
<input id="whendate" type="date" name="whendate" required/></div>
<div class="item">
<label for="whoaccount"><b>Who</b></label>
<input id="whoaccount" type="text" name="whoaccount" required/></div>
<div class="item">
<label for="comment"><b>Comment</b></label>
<textarea rows="3" id="commenttext"></textarea></div>
<div class="item">
<label for="about"><b>About</b></label>
<input id="about" type="text" name="about" required/></div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</form>
<div class="tables">
<table class="list" id="employeeList">
<tr>
<th>When</th>
<th>Who</th>
<th>Comment</th>
<th>About</th>
<th>Media</th>
<th>What</th>
<th>Whom</th>
<th>Reference ID</th>
</tr>
<tbody>
</tbody>
</table>
your HTML is wrong, you are not closing the <div class="form-action-buttons"> after the input and so your table is part of the form.
Also your <div class="container"> and <div class="tables"> are not closed...
Check this out:
function onFormSubmit() {
document.getElementById("catalogform").style.display = "none";
document.getElementById("employeeList").style.display = "block";
return false;
}#employeeList {
display: none;
}<div class="container">
<form name="catalogform" id="catalogform" method="GET" onsubmit="return onFormSubmit();" autocomplete="off">
<div class="item">
<label for="whendate"><b>When</b></label>
<input id="whendate" type="date" name="whendate" />
</div>
<div class="item">
<label for="whoaccount"><b>Who</b></label>
<input id="whoaccount" type="text" name="whoaccount" />
</div>
<div class="item">
<label for="comment"><b>Comment</b></label>
<textarea rows="3" id="commenttext"></textarea>
</div>
<div class="item">
<label for="about"><b>About</b></label>
<input id="about" type="text" name="about" />
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</div>
</form>
<div class="tables">
<table class="list" id="employeeList">
<tr>
<th>When</th>
<th>Who</th>
<th>Comment</th>
<th>About</th>
<th>Media</th>
<th>What</th>
<th>Whom</th>
<th>Reference ID</th>
</tr>
</table>
</div>
</div>