Reputation: 2087
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
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
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