I'm a recent web development grad with a couple of years of web design experience. Recently, my (one and only!) client asked for his forms to be re-done. I've been working a lot with PHP, and I'm trying to implement some validation using jQuery as well as server-side validation.
The validation works nicely. When I disable javascript, while ugly, it still works. While finishing things off, I figured that I would add a little loading animation, and then display either a 'success' message, or re-load the form with the error messages.
The animation appears after submission, but a blank page is all that loads. I'm expecting either an mail success/failure message, or the form again.
See code below. Any advice would be much appreciated.
<?php @require_once("js/mail.php"); ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mail Testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('form').submit(function(e){
e.preventDefault();
var thisForm = $(this);
var txt_name = $("#name").val();
var txt_email = $("#email").val();
var txt_comments = $("#comments").val();
var postData = {
"name" : txt_name,
"email" : txt_email,
"comments" : txt_comments,
};
$(this).fadeOut(function(){
$("#loading").fadeIn(function(){
$.ajax({
type: "POST",
url: thisForm,
data: postData,
success: function(output) {
$("#loading").fadeOut();
$("html").html(output);
},
error: function(output) {
$("#loading").fadeOut();
$("html").html(output);
}
});
});
});
});
});
</script>
<style type='text/css'>
body {
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper { padding: 3em; }
.container {
display: inline-block;
background-color: white;
box-shadow: 0 0 0 6px rgba(0,0,0, .1) inset, 0 0 12px 0 rgba(0, 0, 0, 0.22);
border: 1px solid rgba(0,0,0,.3);
}
.container_inner {
padding: .5em 1.3em;
}
p div, input[type='text'], textarea { text-align: left; width: 100%; padding-right: 1.3em }
p:last-child {
text-align: right;
}
label { text-align: left; }
.error {
color: rgba(255,0,0,1);
padding-left: .8em;
}
.label, .error { display: inline; }
#loading, #success, #error {display: none}
input[type="text"], textarea {
padding: .3em .6em;
display: inline-block;
text-align: left;
width: 92%;
background: rgb(255,255,255); /* Old browsers */
border-radius: 6px;
box-shadow: 1px 0 3px rgba(0,0,0, .4);
border: 1px solid rgba(0,0,0, .6);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="container_inner">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="Reservations">
<p>
<div>
<label for="name">Name</label><?php if (isset($field_errors['name'])) { echo $field_errors['name']; } ?>
</div>
<input type="text" name="name" id="name" value="<?php if (isset($name)) { echo $name; } ?>" />
</p>
<p>
<div>
<label for="email">Email</label><?php if (isset($field_errors['email'])) { echo $field_errors['email']; }?>
</div>
<input type="text" name="email" id="email" value="<?php if (isset($email)) { echo $email; } ?>" />
</p>
<p>
<div>
<label for="comments">Comments</label><?php if (isset($field_errors['comments'])) { echo $field_errors['comments']; } ?>
</div>
<textarea name="comments" id="comments" value="<?php if (isset($comments)) { echo $comments; }?>"></textarea>
</p>
<p>
<?php echo recaptcha_get_html($publickey, $error); ?>
</p>
<p>
<input type="submit" name="btnSubmit" value="submit" />
</p>
</form>
<div id="loading">
<img src="images/loading.gif" />
</div>
<div id="success">
<h1>Thank you for your request.</h1>
</div>
<div id="error">
<h1>Message could not be sent.</h1>
</div>
</div><!-- container_inner -->
</div><!-- container -->
</div><!-- wrapper -->
</body>
</html>
url: thisForm,
should be:
url: thisForm.attr("action"),
You could also simplify the code that gets the field values with:
var postData = thisForm.serialize();
$("html").html(output);
For either success or failure, you are replacing the entire content of the page with whatever is returned from the ajax call.
As this is a self-submitting form there is no need at all for the ajax call. In the submit event remove the following line to allow it to submit as normal:
e.preventDefault();
Alternatively, if you want the animation to happen before the form is submitted, then leave preventDefault and use the callback of the fadeOut effect to call the submit method of the form. You may need a boolean value to prevent this same code being called repeatedly. That is, have a (global) boolean value initially set to false; set it to true when your submit code is first called; if this is true then don't prevent the default behaviour (or start the animation).
If you want the form submission to happen asynchronously - that is, without reloading the form - then you need to:
submit code can start the animation before making the ajax request, and stop it when the call is completed (on success or failure).