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...

You should post your actual code. May be there are some hidden issues not noticeable by you. — ShankarSangoli, Jan 30 '12 at 05:00
The jQuery.ajax error callback has additional parameters which may help troubleshooting. Change your error callback to error(jqXHR, textStatus, errorThrown) and alert the 'textStatus' and 'errorThrown' variables to see what they contain. — Kane Wallmann, Jan 30 '12 at 05:28

score 10 · Accepted Answer · edited Jan 27 '23 at 09:34

10

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

edited Jan 27 '23 at 09:34

Willem Van Onsem

443,496
30
428
555

answered Jan 30 '12 at 04:58

Pathik Gandhi

1,345
1
17
36

I just added it to the original question – elclanrs Jan 30 '12 at 04:59
But how does that explain that I was able to get the success callback before and not now? I disabled cache thinking that was the problem but still get error, but the email gets sent just fine. – elclanrs Jan 30 '12 at 05:00
mail($to, $subject, $message, $headers); echo json_encode(array('success'=>'true')); JS Code success: function(data){ if(data.success == ture){ alert('success'); } Hope it works }, – Pathik Gandhi Jan 30 '12 at 05:01
try to add dataType: 'json' in $.ajax – Pathik Gandhi Jan 30 '12 at 05:17
Can you post you new code again... in jsfiddle or somewhere else – Pathik Gandhi Jan 30 '12 at 05:25

score 3 · Answer 2 · answered Jan 30 '12 at 05:11

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.

answered Jan 30 '12 at 05:11

Dima Koderov

266
1
4

This didn't work either. Still get error but email gets sent. – elclanrs Jan 30 '12 at 05:16

score 0 · Answer 3 · edited May 23 '17 at 10:31

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

jQuery ajax success error

3 Answers3

Linked