Friday, September 30, 2011

Adding Jquery for the Contact Us Form

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;
    }
  });
});
}

No comments:

Post a Comment