CODEWITHSUNDEEP
javascriptjqueryajax
csandreas1
csandreas1

Reputation: 2388

Show an error when email is not sent

I have the following example form below where beforeSend function shows a message that is sending and once it is sent an other function is called .done(function (data) showing a message that message has been sent. All I want to do is to use another function where the message is not sent, to display the message "error, message is not sent"

var form = $('#main-contact-form');
form.submit(function (event) {
     $.ajax({
        type: 'POST',
        url: '../sendemail.php',
        data: {
            Name: name,
            Subject: $form.find("input[name='subject']").val(),
            Email: email,
            message: $form.find("textarea[name=message]").val(),
        },
        beforeSend: function () {
            // message  is sending...
        }                   
    }) //end ajax
    .done(function (data) {
        // message sent!
});
});//end contact form

Upvotes: 0

Views: 158

Answers (3)

Muhammad Alvin
Muhammad Alvin

Reputation: 1210

You use done(), which is executed after a SUCCESSFUL ajax request (usually returns HTTP 200). If you read http://api.jquery.com/jquery.ajax/, there is fail(), which is executed after a FAILED ajax request.

It also depends the output of sendemail.php. If your PHP returns other than HTTP 200 when error, you can utilize fail() promise method, for example...

$.ajax({
    beforeSend: function() {
        $('msg').text('Sending email...');
    }
}).done(function() {
    $('#msg').text('Success!');
}).fail(function() {
    $('#msg').text('Failed!');
});

But, if your PHP also returns HTTP 200 when error, you can do something like the following...

PHP:

$response = array(
    'status' => null, 
    'error'  => null
);

if ($mailer->send()) {
    $response['status'] = true;
} else {
    $response['status'] = false;
    $response['error'] = 'Unable to send email';
}

jQuery:

$.ajax({
    beforeSend: function() {
        $('msg').text('Sending email...');
    }
}).done(function(data) {
    if (data.status === true) {
        $('#msg').text('Success!');
    } else {
        $('#msg').text('Failed: ' + data.error);
    }
});

Upvotes: 0

Justinas
Justinas

Reputation: 43507

Instead of .done use ajax options success and error. Throw error on server when sending email fails.

$.ajax({
    success: function () {
        // message sent!
    },
    error: function () {
        // message sent failed!
    }
});

On server side:

if ($this->sendMessage()) {
    echo "ok";
} else {
    throw new Exception('Email failed to send.', 500);
}

You can't tell if user actually receives email (I guess there is some complicated ways to figure it out).

Upvotes: 1

Yogesh Patil
Yogesh Patil

Reputation: 888

  1. You can use fail api to handle errors as shown below.
  2. Also, in the $.ajax({constObj}) you can have apis like success and error to handle the same.

Refer here for more info 

//1.

$.ajax({
            type: 'POST',
            url: '../sendemail.php',
            data: {
                Name: name,
                Subject: $form.find("input[name='subject']").val(),
                Email: email,
                message: $form.find("textarea[name=message]").val(),
            },
            beforeSend: function () {
           // message  is sending...
            }                   
        }) //end ajax

        .done(function (data) {
        // message sent!

        })
        .fail(function(){
             //handle error here
        });

//2. 

constObj.success(function(data){
});

constObj.error(function(error){
});

Upvotes: 1

Related Questions