I have a simple form that displays an animation when it opens and closes:
<html><head><style type="text/css">
#contactFormContainer
{
width:300px;
margin-top:15px;
}
#contactForm
{
margin-top:15px;
width:300px;
border:solid 1px #4d3a24;
display:none;
}
#contactForm fieldset
{
padding:20px;
border:none;
}
#contactForm label
{
display:block;
}
#contactForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#contactForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#FFFFFF;
padding:5px;
cursor:pointer;
float: right;
}
#contactLink
{
height:15px;
width:218px;
background-image:url('../images/signup.png');
cursor:pointer;
}
#messageSent
{
color:#bc0d1b;
display:none;
}
</style>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contactLink").click(function(){
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
}else{
$("#contactForm").slideUp("slow");
}
});
});
function closeForm(){
$("#messageSent").show("slow");
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}
</script>
</head><body>
<div id="contactFormContainer">
<div id="contactLink"></div>
<div id="contactForm">
<form action="test2.php" enctype="multipart/form-data" method="post">
<fieldset>
<label for="name">Name *</label>
<input id="name" type="text" name="name" />
<label for="email">Email address *</label>
<input id="email" type="text" name="email" />
<input id="sendMail" type="submit" name="signupSubmit" />
<span id="messageSent"></span>
</fieldset>
</form>
</div>
</div>
</body>
</html>
The problem is that if I add <form action="test2.php" enctype="multipart/form-data" method="post"> above the first fieldset – and then close the form… my closing animation no longer works.
TL;DR
- I click submit and the form closes in a nice annimation
- I add a
<form>tag so that I can process the POST - The closing animation nolonger works
Why, and how can I fix it?
coldhead in Freenode’s #jquery channel answered it with the following: http://jsfiddle.net/d9AfJ/7/