在onsubmit时隐藏表单

Question

我试图在onsubmit和显示结果表上隐藏表单。但是每当我点击onsubmit时，所有的东西都会消失，我的表格也不会显示。有人能好心地启发我，因为我是新的html, css和javascript?谢谢你

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>

Answer 1

你的HTML是错误的，你没有关闭输入后的<div class="form-action-buttons">，所以你的表是表单的一部分。你的<div class="container">和<div class="tables">也没有关闭…

看看这个:

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>