JQuery - fadeOut text
Hi all
I have a simple form here
http://www.ttmt.org.uk/forum/jForm/
There is an empty p tag at the bottom that is populated with text when the send button is clicked without filling in all fields or when the email is sent.
I wanted to fade out the text after a few seconds. I have achieved this with
$("#status p").fadeOut(4000);
The problem is once the text has faded out it stays faded out. If I press the send button again no message appears, I assume this is because the <p> is still faded out. How can I reset the opacity of the <p> tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jQuery1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#contactForm').submit(function(){
var unameVal = $("#name").val();
var emailVal = $("#email").val();
var messageVal = $("#message").val();
$.post("contact.php", { username: unameVal, email: emailVal, message: messageVal }, function(data){
$("#status p").html(data);
$("#status p").fadeOut(4000);
if(data.indexOf('Thank you')==0) {document.forms[0].reset();}
});
return false;
});
});
</script>
<title>Form Test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
height:100%;
font:100% "Helvetica Neue", Helvetica, Arial, sans-serif;
}
form{
margin:30px;
width:23em;
}
#status p,
h1{
margin:30px;
font-weight:bold;
}
form fieldset{
border:0;
}
form label,
form input,
form select{
float:left;
}
form label{
width:100%;
}
form input,
form textarea{
background:#eee;
width:100%;
border-width:0;
padding:.35em .2em;
margin-bottom:8px;
font-size:1em;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
font:1em "Helvetica Neue", Helvetica, Arial, sans-serif;;
}
form input:focus,
form textarea:focus,
form input:hover,
form textarea:hover{
background:#e1dfdf;
}
form #send{
width:80px;
}
</style>
</head>
<body>
<form method="post" id="contactForm" action="">
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" />
<label for="email">Email:</label>
<input type="text" id="email" />
<label for="text">Message:</label>
<textarea id="message" rows="10" col="30"></textarea>
<p><input type="submit" value="SEND" id="send" /></p>
</fieldset>
</form>
<div id="status">
<p></p>
</div>
</body>
</html>