php - Why is this POST not being sent w/ Jquery? ← (PHP, JavaScript, JQuery, CSS, HTML)
I have a form that I am trying to submit with POST. When I go to catch the POST vars, nothing is being sent.
<?php require_once("../includes/initialize.php"); ?>
<html><head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function (e) {
var $this = $(this);
e.preventDefault(); // This prevents the form submission.
$("#messageSent").show("slow");
$this.closest('#contactForm').slideUp('slow', function () {
$this[0].submit(); // Actual submission.
});
});
$("#contactLink").click(function(){
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
}else{
$("#contactForm").slideUp("slow");
}
});
});
</script></head><body>
<?php
if(isset($_POST['signupSubmit'])){
echo "Post is set";
echo $_POST['name'], "<br />";
echo $_POST['email'];
}else{
echo "post is not set";
}
if(isset($_POST['signupSubmit'])){
$signup = new Signup();
$signup->name = $_POST['name'];
$signup->email = $_POST['email'];
if($signup->save()) {
$session->message("We will contact you with details.");
} else {
$session->message("Failed", $signup->errors);
}
}
echo output_message($message);
?>
<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>
Any help would be appreciated!
Answer
Solution:
That's because when you submit the form with $this[0].submit(); it still runs the submit handler which unconditionally prevents the form from submitting. Set some flag so the form will submit after the animation.
$('form').submit(function (e) {
var $this = $(this);
if (!$this.data('afteranimation')){
$("#messageSent").show("slow");
$this.closest('#contactForm').slideUp('slow', function () {
$this.data('afteranimation', true);
$this.submit(); // Actual submission.
});
e.preventDefault(); // This prevents the form submission.
}
});