I've finally started to dive into jQuery. I figured what better way to start than to make a contact form. Check out the demo.
Javascript
<script>
$('#contact-form').submit(function() {
var submit = true;
//Validate Email
if($('#field-email').val() == '') {
$('.email').show().fadeOut(8000);
submit = false;
}
//Validate Name
if($('#field-name').val() == '') {
$('.name').show().fadeOut(8000);
submit = false;
}
//Validate Subject
if($('#field-subject').val() == '') {
$('.subject').show().fadeOut(8000);
submit = false;
}
//Validate Subject
if($('#field-message').val() == '') {
$('.message').show().fadeOut(8000);
submit = false;
}
//Post form data to PHP mail script, script will print out true or false.
if(submit) {
$.post('mailer.php', $('#contact-form').serialize(), function(data) {
//$("#form-div").html(data);
if(data == 'true') {
//alert('True!');
//Change these values to set a variable, see if that helps view submit() doc.
$('#form-div').html('Thank you for contacting us');
return true;
} else {
$('#error').text('Sorry, there was an error. Please try again').fadeOut(4000);
return false;
}
}
);
}
return false;
});
</script>
HTML
<div id="form-div">
<form id="contact-form" action="#">
<span id="error"></span>
<p><label>Your Email*</label><input name="email" class="field" id="field-email" type="text" /></p>
<div class="email tip">Please enter a correct email address so we may contact you.</div>
<p><label>Your Name*</label><input name="name" class="field" id="field-name" type="text" /></p>
<div class="name tip">Please enter your name.</div>
<p><label>Subject*</label><input name="subject" class="field" id="field-subject" type="text" /></p>
<div class="subject tip">Please enter a subject</div>
<p><label>Message*</label><textarea name="message" class="field" id="field-message" cols="" rows="10"></textarea></p>
<div class="message tip">Please enter your message</div>
<p>*Required</p>
<input type="submit"/>
</form>
</div>