Success function not being called when form is submitted

Question

Hi,

I've been trying to figure out why the following script's success function isn't running. Everything in my form works perfectly, and the form contents are being emailed correctly, but the success function isn't being called.

If anyone could review my code and let me know why my success function isn't being called I would very much appreciate it!

Here is the HTML form with notification divs, which are hidden via css:

<div id="success" class="notification">
  <p>Thank you! Your message has been sent.</p>
</div>
<div id="failure" class="notification">
  <p>Sorry, your message could not be sent.</p>
</div>
<form id="contact-form" method="post" action="" class="jqtransform">
  <label for="name">Name:</label>
  <input name="name" id="name" type="text" class="validate[required] input" />
  <label for="company">Company:</label>
  <input name="company" id="company" type="text" class="input" />
  <label for="phone">Phone:</label>
  <input name="phone" id="phone" type="text" class="input" />
  <label for="email">Email:</label>
  <input name="email" id="email" type="text" class="validate[required,email] input" />
  <div class="sep"></div>
  <label for="subject">Subject:</label>
  <input name="subject" id="subject" type="text" class="validate[required] input" />
  <div class="clear"></div>
  <label for="message">Message:</label>
  <textarea name="message" id="message" class="validate[required]"></textarea>
  <div id="check-services">
    <input type="checkbox" name="services[]" value="Contractor Recommendation" />
    <div>Contractor Recommendation</div>
    <input type="checkbox" name="services[]" value="Proposal Review" />
    <div>Proposal Review</div>
    <input type="checkbox" name="services[]" value="Existing Website Review" />
    <div>Existing Website Review</div>
    <input type="checkbox" name="services[]" value="Work Evaluation" />
    <div>Work Evaluation</div>
    <input type="checkbox" name="services[]" value="Layman Translation" />
    <div>Layman Translation</div>
    <input type="checkbox" name="services[]" value="Project Management" />
    <div>Project Management</div>
  </div>
  <div class="sep"></div>
  <input name="submit" id="submit" type="submit" class="button" value="Send" />
  <input name="reset" id="reset" type="reset" class="button" value="Clear" onclick="$.validationEngine.closePrompt('.formError',true)" />
</form>

Here is the javascript:

// CONTACT FORM VALIDATION AND SUBMISSION
$(document).ready(function(){
 $('#contact-form').validationEngine({
  ajaxSubmit: true,
  ajaxSubmitFile: 'lib/mail.php',
  scroll: false,
  success:  function(){
   $('#success').slideDown();
  },
  failure: function(){
   $('#failure').slideDown();
   $('.formError').animate({
    marginTop: '+30px'
   });
  }
 });
});

And here is my PHP mailer script:

<?php
$name = $_POST['name'];
$company = $_POST['company'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$services = $_POST['services'];

$to = '[email protected]';
$subject = 'THC - Contact';

$content .= "You received a message from ".$name.".\r\n\n";
if ($company): $content .= "They work for ".$company.".\r\n\n";
endif;
$content .= "Here's the message:\r\n\n".$message."\r\n\n";
$content .= "And they are interested in the services below:\r\n\n";
$content .= implode("\r\n",$services);
if ($phone): $content .= "\r\n\nYou can reach them at ".$phone.".";
else: $content .= "\r\n\nNo phone number was provided.";
endif;

$headers = "From: ".$name."\r\n";
$headers .= "Reply-To: ".$email."\r\n";

if (mail($to,$subject,$content,$headers)):
 return true;
else:
 return false;
endif;
?>

Answer 1

in your mailerscript, echo true or false: you want that content to be readable by the browser. Also, debug that data going back and forth (check out firebug) to see what you're sending vs what you're getting.

Keep in mind that no matter what you echo, you should hit success if there's content. Success means it connected to your page and got data - failure (though pretty sure this should be error, per $.ajax documentation) handles if the request failed all together.

Within success, you see if your returned result (whether a boolean, string, json, whatever) is what you want it to be and go from there.

Answer 2

Shouldn't you set $isValidate = true in your php script to indicate that validation passes ? By the way, what is the point of returning true/false from the php script?

Answer 3

I ended up just modifying the jquery.validationEngine.js file so that the default success parameter doesn't check for any data returned from the php mailer file. Not my favorite way but it suits my needs.

Thanks for everyone's help!