HOWTO: Adding Jquery for better Usability on the contact form
Last modified: November 3, 2008 - 14:39
If the user on the contact page has to fill out a lot of fields, but forgot about it, it would be better if he is warned that he still has to fill out some fields to send the contact.
So as each jquery file, in template.php you can add the js file with:
<?php
drupal_add_js(path_to_theme(). '/jquery.contact.js');
?>In our JS File, jquery.contact.js, we add a function to the submit function, which checks whether all fields are filled up, if not it alerts some messages
if (Drupal.jsEnabled) {
$(document).ready(function() {
$('form#contact-mail-page').submit(function () {
//if one of this fields as nothing in print out that the form is not ready yet
// if ready the field is send
if ($('#contact-mail-page #edit-name').val() == "") {
alert(Drupal.t("The Field @name isn't filled out yet", ['@name'] = Drupal.t("name")]);
return false;
}
else if ($('#contact-mail-page #edit-subject').val() == "") {
alert(Drupal.t("The Field @name isn't filled out yet"), ['@name'] = Drupal.t("subject")]);
return false;
}
else if ($('#contact-mail-page #edit-mail').val() == "") {
alert(Drupal.t("The Field @name isn't filled out yet"), ['@name'] = Drupal.t("mail")]);
return false;
}
else if ($('#contact-mail-page #edit-message').val() == "") {
alert(Drupal.t("The Field @name isn't filled out yet"), ['@name'] = Drupal.t("message")]);
return false;
}
else {
return true;
}
});
});
}