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@email.com';
    $subject = 'Subject';
    $headers = 'From: noreply@email.com' . "\r\n" .
        'Reply-To: noreply@email.com' . "\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 the mail is successful. You can use json_encode(); PHP function for that.

Add json_encode in validate.php at 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

I had the same problem;

textStatus = 'error'
errorThrown = (empty)
xhr.status = 0

That fits my problem exactly. It turns out that when I was loading the HTML-page from my own computer this problem existed, but when I loaded the HTML-page from my webserver it went alright. Then I tried to upload it to another domain, and again the same error occoured. Seems to be a cross-domain problem. (in my case at least)

I have tried calling it this way also:

var request = $.ajax({
url: "http://crossdomain.url.net/somefile.php", dataType: "text",
crossDomain: true,
xhrFields: {
withCredentials: true
}
});

but without success.

This post solved it for me: jQuery AJAX cross domain

Answer 3

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.