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 = 'somemail@mail.com';
    /**
     * E-mail получателя
     * @var string
     */
    private static $emailTo = 'somemail@mail.com';

    /**
     * Отправляет письмо, если письмо отправлено,
     * возвращает 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" при успешной отправке. Сейчас подробнее времени нет написать к сожалению, наводку дал, вперёд!
    – Rikky
    2 ноя 2019 в 12:26
  • Пробовал возвращать, но результат тот же. Я недавно в программировании, поэтому не совсем еще хорошо понимаю как все работает. Кто-нибудь может сказать что именно куда следует прописать. 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".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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