Как я могу показать всплывающее предупреждение после отправки почты из контактной формы, используя AJAX и PHP?

Question

У меня есть контактная форма на веб-странице. Здесь я отправляю почту, бросая ajax-запрос в php mailer. Теперь, если я хочу показать предупреждающее сообщение в зависимости от того, отправлено сообщение или нет, что мне делать?

Вот мой код, который вообще не показывает предупреждение об успехе.

Код AJAX

$(document).ready(function() {
    $('#submit-btn').click(function(event) {
        $.ajax({
            dataType: 'JSON',
            url: 'mail-process.php', //PHP Mail Code Page location
            type: 'POST', //Form Method
            data: $('#contact').serialize(), //Form ID
            beforeSend: function() {
                $('.txt').html('SENDING...');
            },
            complete: function() {
                $('.txt').html('SEND MESSAGE');
            },
            success: function() {
                $('#msg').html('<div class="alert alert-success">Message successfuly Sent.</div>');
            },
            error: function() {
                $('#msg').html('<div class="alert alert-danger">Please Fillup Properly, and Try Again.</div>');
            }
        });
    });
});

Моя почта успешно доставлена, но она не работает при условии успеха и ошибки. Как я могу это исправить?

Answer 1

Во-первых, пожалуйста, проверьте ваш CSS-файл, скрывает ли он div или нет. Если это так, вы должны удалить это.

В любом случае, я рекомендую помещать элемент div оповещения в #msg, а не создавать его при успешном выполнении ajax.

Позвольте им быть невидимыми с помощью display:none, и покажите один из них после запуска ajax.

<div id="msg">
   <div class="alert alert-success" style="display:none">Message successfuly Sent.</div>
   <div class="alert alert-danger" style="display:none">Please Fillup Properly, and Try Again.</div>
</div>

И отредактируйте свой код JavaScript следующим образом.

$(document).ready(function() {
$('#submit-btn').click(function(event) {
    $.ajax({
        dataType: 'JSON',
        url: 'mail-process.php', //PHP Mail Code Page location
        type: 'POST', //Form Method
        data: $('#contact').serialize(), //Form ID
        beforeSend: function() {
            $('.txt').html('SENDING...');
        },
        complete: function() {
            $('.txt').html('SEND MESSAGE');
        },
        success: function() {
            $('.alert-success').show();
        },
        error: function() {
            $('.alert-danger').show();
        }
    });
});

});