CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Ethan
Ethan

Reputation: 2087

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!

Upvotes: 1

Views: 1488

Answers (2)

Jecoms
Jecoms

Reputation: 2848

You can just add an onsubmit function that will fire when the form is submitted. 

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

Upvotes: 1

Rajdeep Paul
Rajdeep Paul

Reputation: 16963

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>

Upvotes: 1

Related Questions