91 lines
2.2 KiB
JavaScript
91 lines
2.2 KiB
JavaScript
var messageDelay = 2000; // How long to display status messages (in milliseconds)
|
|
|
|
// Init the form once the document is ready
|
|
$(init);
|
|
|
|
// Initialize the form
|
|
|
|
function init() {
|
|
// Hide the form initially.
|
|
// Make submitForm() the form's submit handler.
|
|
// Position the form so it sits in the centre of the browser window.
|
|
$('#contactForm').show().on('submit', submitForm).addClass('positioned');
|
|
|
|
// When the "Send us an email" link is clicked:
|
|
// 1. Fade the content out
|
|
// 2. Display the form
|
|
// 3. Move focus to the first field
|
|
// 4. Prevent the link being followed
|
|
|
|
$('a[href="#contactForm"]').on('click', function () {
|
|
$('#contactForm').fadeTo('slow', 0.2);
|
|
$('#contactForm').fadeIn('slow', function () {
|
|
$('#senderName').focus();
|
|
});
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
// Submit the form via Ajax
|
|
|
|
function submitForm() {
|
|
var contactForm = $(this);
|
|
|
|
// Are all the fields filled in?
|
|
|
|
if (
|
|
!$('#senderName').val() ||
|
|
!$('#senderEmail').val() ||
|
|
!$('#message').val()
|
|
) {
|
|
// No; display a warning message and return to the form
|
|
$('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
|
|
contactForm.fadeOut().delay(messageDelay).fadeIn();
|
|
} else {
|
|
// Yes; submit the form to the PHP script via Ajax
|
|
|
|
$('#sendingMessage').fadeIn();
|
|
contactForm.fadeOut();
|
|
|
|
$.ajax({
|
|
url: contactForm.attr('action') + '?ajax=true',
|
|
type: contactForm.attr('method'),
|
|
data: contactForm.serialize(),
|
|
success: submitFinished,
|
|
});
|
|
}
|
|
|
|
// Prevent the default form submission occurring
|
|
return false;
|
|
}
|
|
|
|
// Handle the Ajax response
|
|
|
|
function submitFinished(response) {
|
|
response = $.trim(response);
|
|
$('#sendingMessage').fadeOut();
|
|
|
|
if (response == 'success') {
|
|
// Form submitted successfully:
|
|
// 1. Display the success message
|
|
// 2. Clear the form fields
|
|
// 3. Fade the content back in
|
|
|
|
$('#successMessage').fadeIn().delay(messageDelay).fadeOut();
|
|
$('#senderName').val('');
|
|
$('#senderEmail').val('');
|
|
$('#message').val('');
|
|
|
|
$('#contactForm')
|
|
.delay(messageDelay + 500)
|
|
.fadeIn();
|
|
} else {
|
|
// Form submission failed: Display the failure message,
|
|
// then redisplay the form
|
|
$('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
|
|
$('#contactForm')
|
|
.delay(messageDelay + 500)
|
|
.fadeIn();
|
|
}
|
|
} |