make bootstrap alert disappear automatically - php

Question

i have a form whch sends data to the databse, after data is sent successfully i want to show success msg, but i dont want it to stay rather to disappear after a short while.
$nameErr=$drug_idErr=$priceErr=$quantityErr=$dateErr=$dateInvalid="";
$drug_id=$name=$price=$quantity=$date="";
if(isset($_POST['submit'])){
$drug_id=mysql_real_escape_string(addslashes($_POST['drug_id']));
$name=mysql_real_escape_string(addslashes($_POST['name']));
$price=mysql_real_escape_string(addslashes($_POST['price']));
$quantity=mysql_real_escape_string(addslashes($_POST['quantity']));
$date=mysql_real_escape_string(addslashes($_POST['date']));
if(empty($drug_id)){
$drug_idErr="Required";
}
elseif(empty($name)){
$nameErr="Required";
}
elseif(empty($price)){
$priceErr="Required";
}
elseif(empty($quantity)){
$quantityErr="Required";
}
elseif(empty($date)){
$dateErr="Required";
}
elseif(!preg_match('/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/', $date)){
$dateInvalid="Invalid date format";
}
else{
//send data to database here
$_SESSION['success']="Drug added successfully";
$drug_id=$name=$price=$quantity=$date="";
}
}
the following is my form
<div class="well">
<form id="register-form" class="form-horizontal" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<legend>Add new drug</legend>
<?php if(!empty($_SESSION['success'])){
echo '<div class="alert alert-success">'.$_SESSION['success'].'</div>'; unset($_SESSION['success']);} ?>
<div class="control-group">
<label class="control-label">ID</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-ban-circle"></i></span>
<input type="text" class="input-xlarge" id="drug_id" name="drug_id" placeholder="Drug ID"
value="<?php echo htmlspecialchars($drug_id); ?>">
</div>
<span class="error"><?php echo $drug_idErr;?></span>
</div>
</div>
<div class="control-group ">
<label class="control-label">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-pills"></i></span>
<input type="text" class="input-xlarge" id="name" name="name" placeholder="Drug Name"
value="<?php echo htmlspecialchars($name)?>">
</div>
<span class="error"><?php echo $nameErr;?></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Price</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-dollars"></i></span>
<input type="text" class="input-small" id="price" name="price" placeholder="Drug Price"
value="<?php echo htmlspecialchars($price); ?>">
</div>
<span class="error"><?php echo $priceErr; ?></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Quantity</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-ban-circle"></i></span>
<input type="text" id="quantity" class="input-mini" name="quantity" placeholder="Quantity"
value="<?php echo htmlspecialchars($quantity);?>">
</div>
<span class="error"><?php echo $quantityErr;?></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Expire Date</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-time"></i></span>
<td><input type="text" name="date" id="date" class="span2" placeholder="Expire date"
value="<?php echo htmlspecialchars($date); ?>"/>
</div>
<span class="error"><?php echo $dateErr.$dateInvalid; ?></span>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" name="submit" >Add</button>
</div>
</div>
</form>
</div>
now i can just show the alert but i don knw how to make it disappear

Answer 1

Try this:
$('.alert').hide()
Or you could use fading:
$('.alert').fadeOut(300)