hide div after inserting data in database

hide div after inserting data in database

Hi would you like to help me. im a php newbie. I want to insert employment
information in my database and hide da div where the form placed. here is
my code in html:
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<form name="empform" method="post" action="profile.php" autofocus>
<input name="employ" type="text" id="employ" pattern="[A-Za-z
]{3,20}" placeholder="Who is your employer?">
<input name="position" type="text" id="position" pattern="[A-Za-z
]{3,20}" placeholder="What is your job description?">
<input name="empadd" type="text" id="empadd"
pattern="[A-Za-z0-9@#$% ]{5,30}" placeholder="Where is your work
address?">
<input name="empcont" type="text" id="empcont" pattern="[0-9]{11}"
title="11-digit number" placeholder="Contact number"><input
name="btncancel" type="button" class="btncancel" value="Cancel"
style="width:60px; border-radius:3px; float:right">
<input name="btndone" type="submit" class="btndone" value="Done"
style="width:60px; border-radius:3px; float:right">
</form>
</div>
</div>
php code:
<?php
if(isset($_POST['btndone'])){
$employ=$_POST['employ'];
$position=$_POST['position'];
$empadd=$_POST['empadd'];
$empcont=$_POST['empcont'];
$empdate=$_POST['empdate'];
$empID = $alumniID;
$obj->addEmployment($employ, $position, $empadd, $empcont,
$empdate, $empID);
}
?>
javascript code:
<script>
$(function() {
function runEffect() {
var selectedEffect = "highlight";
$( ".toggler" ).show( selectedEffect);
};
function runDisplay() {
var selectedDisplay = "highlight";
$( "#empdisplay" ).show( selectedDisplay);
};
$( ".btncancel" ).click(function() {
$(".toggler").hide();
return false;
});
$( ".btndone" ).click(function() {
runDisplay();
$(".toggler").hide();
return false;
});
}
</script>