javascript - 如何在提交表单后隐藏 Div 元素

Question

要尽快完成。我在一个网站上工作，该网站需要一个 ID 号，查询一个数据库，然后在一个漂亮的表格中的同一页面上返回数据。我遇到一个奇怪的问题，input 框(表单的一部分)不会消失。这是与此相关的代码:

表格:

<div class="search_box">    
<form method="POST" id="search_form">
        <input type="text" name="person_id" class="submission-boxes" placeholder="Person ID" required><br>
        <input type="submit" name="newperson" class="submission-btn" value="+ Add Person" id="find_em" onclick="SwapDivsWithClick()">
    </form>
</div>

与表单相关的.css:

 form{
width: 100%;
display:inline-block;
}
input{
width: 50%;
padding: 20px;
margin-bottom: 10px;
border-radius: 10px;

}

在 php 脚本中 echo 的函数:

<script type='text/javascript'>
                        function SwapDivsWithClick()
                            {
                             $( 'div' ).remove( '.search_box' );        
                            }
                </script>"

这就是我在经过长时间的反复试验后目前正在尝试的。我认为问题是当用户提交表单时，php 脚本的执行速度快于页面重新加载的速度，因此当它重新加载时，它会从附加的 .css 样式表中继承样式。关于如何让它工作的任何想法？

注意:我已经尝试用必要的信息替换 search_box 类。同样的事情正在发生。

谢谢大家!

Answer 1

这里不需要使用 JavaScript。只需检查表单是否已提交，并根据此隐藏 div 元素。

<div class="search_box" <?php if(isset($_POST['newperson'])){ echo "style='display:none'"; } ?>>    
    <form method="POST" id="search_form">
        <input type="text" name="person_id" class="submission-boxes" placeholder="Person ID" required><br>
        <input type="submit" name="newperson" class="submission-btn" value="+ Add Person" id="find_em">
    </form>
</div>