0

Есть рабочая форма отправки сообщений на email.

<form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php">
        <div class="form-row">
            <div class="form-group col-sm-6">
                <label for="name" class="nameForInput">Имя:</label>
                <input type="text" name="name" class="form-control" id="name" placeholder="Enter name" >
            </div>
            <div class="form-group col-sm-6">
                <label for="email" class="nameForInput">Email:</label>
                <input type="mail" name="email" class="form-control" id="email" placeholder="Enter email" >
            </div>
            </div>
            <div class="form-group">
                <label for="phone" class="nameForInput">Телефон:</label>
                <input class="form-control phone" name="phone" type="text" placeholder="+7 (800) 000-00-00" >
            </div>
        <div class="form-group">
            <label for="message" class="nameForInput">Сообщение:</label>
            <textarea id="message" class="form-control" name="message" rows="5"placeholder="Enter your message" ></textarea>
        </div>
        <div class="form-group">
        <label for="myfile" class="file-label left">
          <img src="img/upload.svg" alt="">
          <p class="amount">Прикрепить файлы</p>
        </label>
        <input type="file" class="my" id="myfile" name="myfile[]" multiple>
        </div>
        <div class="form-group">
                <input id="check" name="check" checked type="checkbox">
                <span class="check-text">Подтверждаю согласие на обработку персональных данных</span>
</div>
        <button type="submit" class="btn btn-success btn-lg">Отправить</button>
       <div class="result">
                <span id="answer"></span>
                <span id="loader"><img src="img/loader.gif" alt=""></span>
            </div>
    </form>

ajax:

$(function() {

  $('#form').on('submit', function(e) {

    e.preventDefault();

    var form = $('#form'),
        button = $('.btn'),
        answer = $('#answer'),
        loader = $('#loader');

    $.ajax({
        url: 'handler.php',
        type: 'POST',
        contentType: false,
        processData: false,

    data: new FormData(this),

        beforeSend: function() {
            answer.empty();
            button.attr('disabled', true).css('margin-bottom', '20px');
            loader.fadeIn();
            },

        success: function(result) {
            loader.fadeOut(300, function() {
            answer.text(result);
            });
            form[0].reset();
            button.attr('disabled', false);
            },

        error: function() {
            loader.fadeOut(300, function() {
            answer.text('Произошла ошибка! Попробуйте позже.');
            });
            button.attr('disabled', false);
            }
        });
    });
  });

ContactMailer.php:

<?php

class ContactMailer
{
    /**
     * E-mail отправителя
     * @var string
     */
    private static $emailFrom = '[email protected]';
    /**
     * E-mail получателя
     * @var string
     */
    private static $emailTo = '[email protected]';

    /**
     * Отправляет письмо, если письмо отправлено,
     * возвращает TRUE, в противном случае FALSE.
     * @param string $name
     * @param string $email
     * @param string $phone
     * @param string $message
     * @return boolean
     */
    public static function send($name, $email, $phone, $message)
    {
        // Формируем тело письма
        $body = "Имя: " . $name . "\nE-mail: " . $email . "\nТелефон: " . $phone . "\n\nСообщение:\n" . $message;

        // Создаем объект PHPMailer
        $mailer = new PHPMailer(true);
        // Настройки подключения
        $mailer->isSMTP();
        // Устанавливает хост почтового сервера (Mail.ru: smtp.mail.ru, Google: smtp.gmail.com)
        $mailer->Host = 'smtp.mail.com';
        // Включает SMTP-авторизацию
        $mailer->SMTPAuth = true;
        // Логин или E-mail целиком
        $mailer->Username = self::$emailFrom;
        // Пароль от почтового ящика
        $mailer->Password = '';
        // Протокол соединения
        $mailer->SMTPSecure = '';
        // Порт для исходящей почты
        $mailer->Port = '';


        // Устанавливает кодировку
        $mailer->CharSet = 'UTF-8';
        // Устанавливает E-mail и имя отправителя
        $mailer->setFrom(self::$emailFrom, $name);
        // Добавляет E-mail получателя
        $mailer->addAddress(self::$emailTo);
        // Настройка HTML-формата
        $mailer->isHTML(false);
        // Тема письма
        $mailer->Subject = 'Заполнена форма обратной связи';
        // Основное тело письма
        $mailer->Body = $body;


    // Отправляем письмо
    if ($mailer->send()) {
        return true;
    }
        return false;
    }
}

handler.php:

<?php

require_once __DIR__ . '/mailer/Validator.php';
require_once __DIR__ . '/mailer/ContactMailer.php';

if (!Validator::isAjax() || !Validator::isPost()) {
    echo 'Доступ запрещен!';
    exit;
}

$name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
$email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
$phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
$message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;

//защита от XSS
filter_var($_POST['name'], FILTER_SANITIZE_STRING);
filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
filter_var($_POST['phone'], FILTER_SANITIZE_NUMBER_INT);
filter_var($_POST['message'], FILTER_SANITIZE_STRING);


//Выдает ошибку, если размер загружаемых файлов превышает лимит установленный сервером
if($_SERVER['REQUEST_METHOD'] == 'POST' && empty($_POST) && empty($_FILES) && $_SERVER['CONTENT_LENGTH'] > 0)
    { echo "CONTENT SIZE EXCEEDS THE LIMIT"; 
exit;}


if (empty($name) || empty($email) || empty($phone) || empty($message)) {
    echo 'Все поля обязательны для заполнения.';
    exit;
}


if (!Validator::isValidEmail($email)) {
    echo 'E-mail не соответствует формату.';
    exit;
}

if (!Validator::isValidPhone($phone)) {
    echo 'Телефон не соответствует формату.';
    exit;
}


if (ContactMailer::send($name, $email, $phone, $message)) {
    echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
} else {
    echo ' Произошла ошибка! Не удалось отправить сообщение.';
}
exit;

?>

css:

#answer {
 color: #ff5b5b;
}

Все работает, но все сообщения выводятся красным, т.к. в стилях красный цвет для #answer и задан. Но надо чтоб при успешной отправке формы сообщения выводились зеленым цветом, а при ошибках - красным. Пробовал добавить это:

success: function(result) {

            loader.fadeOut(300, function() {
            if (result === 'ok') {
            answer.text(result).addClass('success');
        }   else {
            answer.text(result).addClass('error');
        }
            });
            form[0].reset();
            button.attr('disabled', false);
            },

css:

.success {
  color: #218838;
}

.error {
  color: #ff5b5b;
}

, но всегда добавляется только класс 'error', и при успешной отправке также. Еще пробовал в файле handler.php просто прилепить стили к сообщению:

if (ContactMailer::send($name, $email, $phone, $message)) {
    echo htmlspecialchars($name) . '<span style="color: #218838;">, ваше сообщение успешно отправлено.</span>';
} else {
    echo 'Произошла ошибка! Не удалось отправить сообщение.';
}
exit;

, но ничего не применяется, выдает просто сообщение вместе с тегами:

'<span style="color: #218838;">, ваше сообщение успешно отправлено.</span>'

, хотя, если создать просто какой-то отдельный php файл, там сообщение в echo выводится зеленым цветом, не работает именно в этом handler.php файле.

Кто-нибудь может подсказать как правильно сделать переключатель в Ajax, чтоб сообщение при успешной отправке выводилось зеленым и почему не применяются css стили в handler.php (просто интересно).

2
  • Вы пишете чтобы закрасить в зелёный сервер должен вернуть result === 'ok' после запроса, но сами в PHP файле не возвращаете "ok" при успешной отправке. Сейчас подробнее времени нет написать к сожалению, наводку дал, вперёд! Commented 2 нояб. 2019 в 12:26
  • Пробовал возвращать, но результат тот же. Я недавно в программировании, поэтому не совсем еще хорошо понимаю как все работает. Кто-нибудь может сказать что именно куда следует прописать. Commented 5 нояб. 2019 в 10:38

3 ответа 3

0

Один из способов решения:

success: function(result) {
        loader.fadeOut(300, function() {
        if (result.includes("успешно")) {
        answer.text(result).addClass('success');
    }   else {
        answer.text(result).addClass('error');
    }
        });
        form[0].reset();
        button.attr('disabled', false);
        },

https://stackoverflow.com/questions/58787599/change-the-color-of-output-messages-when-submitting-a-form-using-ajax/58787976?noredirect=1#comment103864226_58787976

0

Еще один способ.

ContactMailer.php:

// Отправляем письмо
   if ($mailer->send()) {
    return true;
     } else {
         echo 'no';
         return false;
}

handler.php:

if (ContactMailer::send($name, $email, $phone, $message)) {
    echo 'yes';
} else {
    echo 'Произошла ошибка! Не удалось отправить сообщение.';
}
exit;

ajax:

success: function(data) {
            loader.fadeOut(300, function() {
            if (data === "yes") {
            answer.text("Ваше сообщение успешно отправлено.").addClass('success');
          } else {
            answer.text(data).addClass('error');
          }
          });
            form[0].reset();
            button.attr('disabled', true);
        },

Для корректного переключения перед вызовом ajax также удаляем класс answer.removeClass('error success') как в примере выше, иначе к ответу будет добавляться сразу два класса.

0

Еще один.

ContactMailer:

// Отправляем письмо
    if ($mailer->send()) {
        return true;
      } 
        return false;

handler.php:

require_once __DIR__ . '/mailer/Validator.php';
require_once __DIR__ . '/mailer/ContactMailer.php';


if (!Validator::isAjax() || !Validator::isPost()) {
    $data['error'] = 'Доступ запрещен!';
    echo json_encode($data);
    exit;
}

$data = array();

$name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
$email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
$phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
$message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;


//защита от XSS
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$phone = filter_var($_POST['phone'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);


//Выдает ошибку, если размер загружаемых файлов превышает лимит установленный сервером
if($_SERVER['REQUEST_METHOD'] == 'POST' && empty($_POST) && empty($_FILES) && $_SERVER['CONTENT_LENGTH'] > 0) {
    $data['error'] = "CONTENT SIZE EXCEEDS THE LIMIT";
    echo json_encode($data);
    exit;
}


if (empty($name) || empty($email) || empty($phone) || empty($message)) {
    $data['error'] = 'Все поля обязательны для заполнения.';
    echo json_encode($data);
    exit;
}

if (!Validator::isValidName($name)) {
    $data['error'] = 'Имя не соответствует формату (имя должно содержать только буквы).';
    echo json_encode($data);
    exit;
}


if (!Validator::isValidEmail($email)) {
    $data['error'] = 'E-mail не соответствует формату.';
    echo json_encode($data);
    exit;
}

if (!Validator::isValidPhone($phone)) {
    $data['error'] = 'Телефон не соответствует формату.';
    echo json_encode($data);
    exit;
}


if (ContactMailer::send($name, $email, $phone, $message)) {
    $data['success'] = htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
    echo json_encode($data);
} else {
    $data['error'] = 'Произошла ошибка! Не удалось отправить сообщение.';
    echo json_encode($data);
}
exit;

ajax:

$(function() {

  $('#form').on('submit', function(e) {


    e.preventDefault();

    var form = $('#form'),
        button = $('.btn'),
        answer = $('#answer'),
        loader = $('#loader');
        answer.removeClass('error success');

    $.ajax({
        url: 'handler.php',
        type: 'POST',
        contentType: false,
        processData: false,
        dataType: "json",


    data: new FormData(this),

        beforeSend: function() {
            answer.empty();
            button.attr('disabled', true).css('margin-bottom', '20px');
            loader.fadeIn();
            },

        success: function(data) {
            loader.fadeOut(300, function() {
            if (data.error) {
            answer.text(data.error).addClass('error');
        }   else {
            answer.text(data.success).addClass('success');
        }
            });
            form[0].reset();
            button.attr('disabled', true);
            },

        error: function() {
            loader.fadeOut(300, function() {
            answer.text('Произошла ошибка! Попробуйте позже.').addClass('error');
            });
            button.attr('disabled', true);
            }

        });

    });

  });

В этом способе в ajax обязательно добавляем dataType: "json".

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.