jQuery ajax success error

Question

I'm trying to submit a form witch sends an email:

JS

var that = $(this);
$.ajax({
  url: '../wp-content/themes/bsj/php/validate.php',
  type: 'post',
  context: that,
  data: $('#sign-up').serialize(),
  cache: false,
  success: function(){ 
    alert('success!');
  },
  error: function(){
    alert('error!');
  }
});

PHP

/*----------------------------------
    Variables
----------------------------------*/

    // Personal info
    $prefix = $_POST['prefix'];
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $company = $_POST['company'];
    $email = $_POST['email'];
    $title = $_POST['title'];
    $dept = $_POST['dept'];

    // Contact details
    $address = $_POST['address'];
    $address2 = $_POST['address2'];
    $city = $_POST['city'];
    $state = $_POST['state'];
    $zip = $_POST['zip'];
    $phone = $_POST['phone'];
    $ext = $_POST['ext'];
    $fax = $_POST['fax'];

    // Job Summary
    $job_title = $_POST['job_title'];
    $positions = $_POST['positions'];
    $hours = $_POST['hours'];
    $age = $_POST['age'];
    $wage = $_POST['wage'];
    $wage_type = $_POST['wage_type'];
    $job_description = $_POST['job_description'];
    $comments = $_POST['comments'];


/*----------------------------------
    Mail Form
----------------------------------*/

    $to      = '[email protected]';
    $subject = 'Subject';
    $headers = 'From: [email protected]' . "\r\n" .
        'Reply-To: [email protected]' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();

    $message = 
        '### Personal Information ###' . "\r\n\r\n" .
        'Prefix: ' . $prefix . "\r\n" .
        'First Name: '. $first_name . "\r\n" .
        'Last Name: ' . $last_name . "\r\n" .
        'Company: ' . $company . "\r\n" .
        'E-Mail: ' . $email . "\r\n" .
        'Title: ' . $title . "\r\n" .
        'Dept.: ' . $dept . "\r\n\r\n";

    $message .= 
        '### Contact Details ###' . "\r\n\r\n" .
        'Address: ' . $address . "\r\n" .
        'Address 2: ' . $address2 . "\r\n" .
        'City: ' . $city . "\r\n" .
        'State: ' . $state . "\r\n" .
        'Phone: ' . $phone . "\r\n" .
        'Ext.: ' . $ext . "\r\n" .
        'Fax: ' . $fax . "\r\n\r\n";

    $message .= 
        '### Job Description ###' . "\r\n\r\n" .
        'Job Title: ' . $job_title . "\r\n" .
        'Positions: ' . $positions . "\r\n" .
        'Hours: ' . $hours . "\r\n" .
        'Age: ' . $age . "\r\n" .
        'Wage: ' . $wage . ' - ' . $wage_type .  "\r\n" .
        'Job Description: ' . $job_description . "\r\n" .
        'Comments: ' . $comments;

    mail($to, $subject, $message, $headers);

I'm setting that because I'm using a modal window plugin to display the form, this way I get the right scope.

The main problem is that when I click submit the email gets in my inbox just fine but it always executes the error function and not the success one.

This is driving me nuts, I looked EVERYWHERE for answers with no luck.

I got the success callback a couple times but now it doesn't work anymore and I don't know why. I'm getting the email just fine...

I checked the response headers with Chrome Developer tools and I get 200 OK so it's getting back. What is the problem?

EDIT: Well, I give up for today after 5 hours trying. I might come back tomorrow and try other things. I'll just use complete for now, which works fine. I'm thinking it could be related to the server. The client is using IIS...

Answer 1

You did not provide your validate.php code so I'm confused. You have to pass the data in JSON Format when when mail is success. You can use json_encode(); PHP function for that.

Add json_encdoe in validate.php in last

mail($to, $subject, $message, $headers); 
echo json_encode(array('success'=>'true'));

JS Code

success: function(data){ 
     if(data.success == true){ 
       alert('success'); 
    } 

Hope it works

Answer 2

Try to set response dataType property directly:

dataType: 'text'

and put

die(''); 

in the end of your php file. You've got error callback cause jquery cannot parse your response. In anyway, you may use a "complete:" callback, just to make sure your request has been processed.