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;

}

echo脚本中的php'd函数：

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: