如何在表单提交后隐藏Div元素 - How To Hide A Div Element After Form Submit

How To Hide A Div Element After Form Submit

本文关键字：隐藏 Div 元素表单提交 | 更新日期: 2023-09-27

会使这个快速。我在一个网站上工作，需要一个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 'd的功能:

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

这是我目前正在尝试经过长串的试验和错误的时刻。我认为问题是当用户提交表单的php脚本执行速度比页面可以重新加载，所以当它重新加载它继承的样式从附加的.css样式表。有什么办法让它工作吗?

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

谢谢大家!

这里不需要使用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>

您可以添加一个onsubmit函数，该函数将在表单提交时触发。

<form method="POST" id="search_form" onsubmit="SwapDivsWithClick()">

 function SwapDivsWithClick() {
  $('div').remove('.search_box');        
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search_box">    
<form method="POST" id="search_form" onsubmit="SwapDivsWithClick()">
        <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>