Ethan Ethan - 1 month ago 7
HTML Question

How To Hide A Div Element After Form Submit

going to make this quick. I am working on a site that takes an id number, queries a database, and then returns the data in on the same page in a nice table. I am having a strange problem where the

input
box (part of a form) will not disappear. Here is the code relevant to this:

Form:

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


The
.css
relevant to the form:

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

}


The function that is
echo
'd within the
php
script:

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


This is what I am currently trying at the moment after a long string of trial and error. I think the problem is when the user submits the form the php script executes faster than the page can reload, so when it does reload it inherits the style from the attached
.css
stylesheet. Any ideas on how I can get this to work?

NOTE: I've already tried replacing the
search_box
class with the necessary information. The same sort of thing was happening.

Thanks everyone!

Answer

There's no need to use JavaScript here. Simply check whether the form has been submitted or not, and based on that hide the div element.

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