时间戳

首页 > 解决方案 > 提交时隐藏表格

javascript - 提交时隐藏表格

问题描述

我试图在提交时隐藏表单并显示结果表。但是每当我点击提交时，一切都会消失，我的表格也不会显示。有人可以启发我，因为我是 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>

标签： javascripthtmlcss

解决方案

您的 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>

推荐阅读