0
<form action="mail-call.php" method="post">
    <p>Заказать звонок</p>
    <input type="text" placeholder="Ваше имя" name="name" required>
    <input type="text" placeholder="Ваш телефон" name="tel_number" required>
    <button name="reserve_submit">Заказать звонок</button>
</form>

Это код формы с кнопкой. После нажатия и удачной валидации полей отправляется письмо с использованием phpmailer.

Хочу изменить текст на кнопке при удачной отправке письма. Ибо при onlick текст изменится даже в случае, если поля заполнены неправильно.

К какому событию (или к чему-то другому) можно привязаться, чтоб грамотно это реализовать?

Думал, что можно сделать через button.onsubmit = function() {this.innerHTML = 'Отправлено'}, но, видимо, это событие для других целей...

5
  • Предоставьте код отправки данных (те, которые на JS) и то, что может ответить сервер при удаче и ошибке.
    – user207618
    16 мая 2016 в 15:16
  • @Other если я вас правильно понял, то JS я не использую в этих целях. ибо вся отправка идет через php: начиная с <?php if(isset( $_POST['reserve_submit'] )) { ... формируется тело письма ... и заканчивая '$mail->Send();'
    – lexxl
    16 мая 2016 в 15:21
  • Если так, то текст поменять динамически не выйдет. Либо перезагрузка страницы и вместо формы красивая табличка "Отправлено!", но это давно не в тренде, сейчас формы без AJAX - это что-то из эры австралопитеков (не всегда, но в общем...).
    – user207618
    16 мая 2016 в 15:26
  • @Other а можете привести пример ajax-запроса, в котором будет, к чему привязаться для решения моей задачи?
    – lexxl
    16 мая 2016 в 15:59
  • ru.stackoverflow.com/a/524251/207618
    – user207618
    16 мая 2016 в 16:49

3 ответа 3

0

К какому событию (или к чему-то другому) можно привязаться, чтоб грамотно это реализовать?

Насколько я понял, Вам, по какой-то причине нужно сделать это действие "инлайново", в этом случае, слушайте событие submit на форме. Но по-хорошему, Вам нужно удостовериться, что письмо действительно было отправлено и сервер положительно ответил.

 <form action="mail-call.php" method="post" onsubmit="_onSubmit(event)">
        <p>Заказать звонок</p>
        <input type="text" placeholder="Ваше имя" name="name" required>
        <input type="text" placeholder="Ваш телефон" name="tel_number" required>
        <input type="submit" name="reserve_submit" value="Заказать звонок">
    </form>

    <script>
        function _onSubmit(e) {
            document.forms[0].elements[2].value = 'Отправлено!';
            e.preventDefault(); // debug purposes
        }
    </script>
0

По просьбе привожу пример AJAX-отправки:

// mail-call.php
// Получаем данные, обрабатываем, отправляем и пр.
$name = trim($_POST['name']);
$phone = trim($_POST['tel_number']);
$response = [
    'status' => false
];

if($name === '' || $phone === '')
    $response['error'] = 'Имя и телефон должны быть заполненными';
else if(!preg_match('/^\d\-\d{3}\-\d{3}$/', $phone))
    $response['error'] = 'Телефон должен быть вида: 1-234-567';
else{
    $response['status'] = true;
    $response['name'] = $name;
    $response['phone'] = $phone;
}

print json_encode($response);

// Страница заказа
<form action="/mail-call.php" method="post" id='orderForm'>
    <p>Заказать звонок</p>
    <input type="text" placeholder="Ваше имя" name="name" required>
    <input type="text" placeholder="Ваш телефон" name="tel_number" required>
    <button name="reserve_submit">Заказать звонок</button>
</form>
<script>
    function submitHandler(e){
        // Ищем кнопку отправки (в ней будем писать ответ) и предотвращаем стандартное действие браузера
        let submit = this.querySelector('[name="reserve_submit"]');
        e.preventDefault();

        // Это новый метод запросов, в старых браузерах не работает
        // Но удобный, отправляет всё в PHP-обработчик
        fetch(this.action, {
            method: this.method,
            body: new FormData(this)
        }).then(raw => raw.json().then(success => {
            // Как только получили ответ, смотрим статус
            if(success.status){
                // Отлично, пишем что всё отправилось
                submit.innerHTML = success.name + ", принято на: " + success.phone;
            }else{
                // Если статус провалил явки, можно написать причину
                // В моём примере в ответ добавляется причина (error)
                submit.innerHTML = "Произошла ошибка: " + success.error;
            }
        })).catch(error => 
            // Если произошла ошибка в JS, обрабатываем тут
            submit.innerHTML = "Ошибка отправки"
        );
    }

    document.addEventListener('DOMContentLoaded', e => {
        // Навешиваем обработчик отправки на форму
        document.querySelector('#orderForm').addEventListener('submit', submitHandler);
    });
</script>

Пример рабочий, PHP5.6, Chrome50, FF42.

0

Решил проблему следующим образом:

PHP:
в конце файла ввёл переменную, чтобы получать её в качестве подтверждения от сервера, что всё прошло удачно

<?php
  if( $_POST ) {
  ...
  ...  // формирование тела письма и вызов класса 'class.phpmailer.php' );
  ...
    if ( $mail->send() ) {
      $result = '1';
    } else {
      $result = '0';
    }
    die( $result );  // завершение работы скрипта и вывод результата в переменную
  }
?>

JS:
Используя jQuery, сформировал AJAX запрос

var data = $('#modalCallOrder form').serialize();  // собираю и упорядочиваю данные в форме
$.ajax({
  url: "mail.php",       // путь к файлу с кодом для формирования тела письма
  type: "POST",          // указываю метод отправки
  data: data,            // указываю данные для передачи на сервер
  beforeSend: function() {
    $('#modal button').text('Отправляется...');  // перед отправкой письма меняю текст кнопки
  },
  success: function(result) {      // получаю ответ от сервера
    if ( result == 1 ) {           // если 1, значит письмо отправлено
      console.log('Письмо отправлено');
      $('#modal button').text('Отправлено');   // после отправки письма меняю текст кнопки
      $('#modal form').find('input').val('');  // очищаю введённые значения
    } else {
      console.log('Ошибка отправки');
    }
  },
  error: function() {
    console.log('Ошибка доступа')
  }
})

HTML:
Код формы очистил от данных про путь к php-файлу и метод отправки

<form>
    <p>Заказать звонок</p>
    <input type="text" placeholder="Ваше имя" name="name" required>
    <input type="text" placeholder="Ваш телефон" name="tel_number" required>
    <button>Заказать звонок</button>
</form>

Ваш ответ

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

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