Как реализовать отправку почты при помощи AJAX?

Question

[Johnny Show]

Создал функционал обратной связи, письмо на локальном сервере OpenServer приходит,на почту не приходит, так же не срабатываетAJAX функция( alert() , console.log() не срабатывают). Может я не правильно передаю с файла php в файл js.
Использую MVC структуру, Smarty.
В общем надеюсь решение вы подскажите.Спасибо!

file.htm (view)

spoiler

<form id="form" class="form-horizontal">
    <fieldset>
     <div class="control-group">
       <input type="text" id="name" name="name" placeholder="имя" class="input-xlarge" required="required" />
    </div>
    <div class="control-group">
      <input type="text" id="email" name="email" placeholder="email" class="input-xlarge"  required="required"/>
    </div>
    <div class="control-group">
       <input type="text"  id="subject"   name="subject" placeholder="тема" class="input-xlarge"  required="required"/>    
    </div>
    <div class="control-group">
      <textarea rows="3" id="msg" name = "msg" class="input-xlarge" placeholder="Укажите причину"  required="required"  >
      </textarea>
      </div>
      <button class="btn  btn-large btn-success" type="submit" onclick="mail();">Отправить</button>
    </fieldset>
    </form>

fileController.php

spoiler

function sendAction() {
  $name = trim(htmlspecialchars($_REQUEST['name']));
  $email = trim(htmlspecialchars($_REQUEST['email']));
  $subject = trim(htmlspecialchars($_REQUEST['subject']));
  $msg = trim(htmlspecialchars($_REQUEST['msg']));
  $headers = '';
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
  $headers .= "From: Отправитель < $email >\r\n"; //Наименование и почта

  if ( (!empty($name)) && ( !empty($email)) && ( !empty($subject)) && ( !empty($msg))) {

       $to = '[e-mail]';
       $message = "Имя: $name \nПочта: $email \nТема: $subject \nТекст: $msg";
       
        $resData =  mail($to, $subject, $message, $headers);

        if ($resData['success']) {
            $resData['success'] = 1;
            $resData['message'] = 'Письмо отправлено!';

        } else {
            $resData['success'] = 0;
            $resData['message'] = 'Ошибка отправки!';
        }

        echo json_encode($resData);
    } else {
        redirect('/');
    }

}

file.js

spoiler

function mail() {
    var name = $('#name').val();
    var email = $('#email').val();
    var subject = $('#subject').val();
    var msg = $('#msg').val();

    var postData = 'name='+name+'&email='+email+'&subject=' +subject+'&msg=' +msg;
    $.ajax({
        type: 'POST',
        async: true,
        url: '/contact/send/',
        data: postData,
        dataType: 'json',
        success: function (data) {
            console.log(data['message']);

            if(data['success']) {

                alert(data['message']);
            }else{
                alert(data['message']);
       
            }
        }
    })

  }

Comments

[Dark Hole]

Спрячьте код под спойлеры, неудобно. И используйте на таб 2 пробела, хотя бы в JS и HTML

[Dark Hole]

И уберите из названия "возможно"

Answer 1

[ThunderCat]

1) data['message'] это что за нотация для жс? Может data.message?
2) что пишет консоль браузера? Кучу ошибок?
3) Для начала смотрите что в нетворк вам вернул пхп скрипт, ну и что отправилось тоже надо бы посмотреть
4)

var name = $('#name').val();
    var email = $('#email').val();
    var subject = $('#subject').val();
    var msg = $('#msg').val();
    var postData = 'name='+name+'&email='+email+'&subject=' +subject+'&msg=' +msg;

можно заменить на var postData = $('.form-horizontal').serialize();

UPD: Автор повесил на кнопку субмит инлайновый вызов функции, который я проморгал. Так как запрос аякса вызывается параллельно с субмитом формы(по клику на кнопку типа субмит), то ясное дело яваскрипт отработать не успевал, а форма субмитилась на свой же урл. Такие вот косяки.
Для тех кто наткнется в будущем на подобное:
1) НЕ ВЕШАТЬ ИНЛАЙН ФУНКЦИИ НА ЭЛЕМЕНТЫ, ИСПОЛЬЗУЙТЕ МЕХАНИЗМ ЛИСТЕНЕРОВ.
2) Если страница перегружается - значит форма сработала явно, без аяксовой отправки(это можно было понять еще при упоминании того, что данные из нетворк отладчика "пропадают при отсылке аякса", но я опять же протупил)
3) не вешать события на клик, если это обработчик формы, это плохо во всех смыслах, мешает нормальной валидации, мешает предотвращению оправки формы через код, и вообще - это плохо.

Comments

[Johnny Show]

как раз вывод сообщения,которое прописано в контроллере data['message'], не я придумал такой способ вывода, а изучал по видео-уроку довольно от толкового автора и на других функциях работает на ура, возможно я не правильно передаю данные в js.
2. serialize() использовал, alert() не срабатывает,я использовал другой способ передачи в js, все работало, только там не было передачи при помощи json, а значит в этом ошибка.
2. Ошибки в консоли не наблюдаются.
3.после отправки данных с формы сразу исчезают данные с просмотра полученных данных при помощи аякса, а в консоли для js вообще нет вывода, хоть и писал console.log()

[ThunderCat]

Johnny Show,

как раз вывод сообщения,которое прописано в контроллере data['message'],

для начала выведите data, хотя сомневаюсь что там что-то есть при таком подходе.

serialize() использовал, alert() не срабатывает,

проверьте что возвращает скрипт пхп, без этого БЕСПОЛЕЗНО что-либо вообще ковырять, скорее всего скрипт на сервере ничего не делает.
и первой строчкой в пхп - var_dump($_REQUEST); и смотреть ответ сервера в нетворк.

redirect('/');  //это куда по вашему будет редирект? 
//здесь, наверно, echo json_encode('error'); должно быть.

после отправки данных с формы сразу исчезают данные с просмотра полученных данных при помощи аякса,

[Johnny Show]

ThunderCat, redirect() - функция, которая прописана в отдельном файле, она делает редирект на главную страницу.
PHP ничего не возвращает , поставив галочку в Preserve log показал ответ: failed to load response data

[ThunderCat]

Johnny Show, значит нет ответа сервера, скрипт жс отрабатывает нормально, однако на сервере данные не обрабатываются, возможно у вас по указанному адресу ничего нет(из кода, например не прописан роут для этого пути), просто откорйте этот путь из браузера, думаю там будет ошибка.

[ThunderCat]

Johnny Show,

redirect() - функция, которая прописана в отдельном файле, она делает редирект на главную страницу.

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

Answer 2

[Дмитрий Гаджиев]

чего то я не вкурил:
-в файле file.js КУДА вы передаете данные, в какой php скрипт???
-в файле fileController.php как должна заработать функция? самопроизвольно? или при приходе данных? или при нажатии на кнопку?

Comments

[Johnny Show]

при нажатии на кнопку. В файле html повешен onclick="main();"

[ThunderCat]

Дмитрий Гаджиев

-в файле file.js КУДА вы передаете данные, в какой php скрипт???

Очевидно, на контроллер и экшн прописанный в роуте как /contact/send/. Вполне возможно что роут кстати не настроен, и вызывается не тот контроллер и экшн (contactController вместо fileController например).

[Johnny Show]

ThunderCat, есть файл .htaccess, в котором прописаны настройки преобразования урла. При вводе в адресной строке myshop.local/contact - попадают на нужную мне страницу. Значит с урлом все ок.

[Johnny Show]

ThunderCat, тестировал чужую функцию , функции js срабатывали :

spoiler

$(document).ready(function() {

    $("#form").submit(function() {
         $.ajax({
             type: "POST",
             url: "/contact/send/",
            data: $(this).serialize()
         }).done(function() {
             $(this).find("input").val("");
             alert("Спасибо за заявку! Скоро мы с вами свяжемся.");
            $("#form").trigger("reset");
         });
        return false;
     });

Значит дело в :

spoiler

$resData =  mail($to, $subject, $message, $headers);

        if ($resData['success']) {
            $resData['success'] = 1;
            $resData['message'] = 'Письмо отправлено!';

        } else {
            $resData['success'] = 0;
            $resData['message'] = 'Ошибка отправки!';
        }

        echo json_encode($resData);

[Johnny Show]

ThunderCat, а еще после отправки формы, все введенные данные видны в адресной строке, будто я передают GET запросом

[Дмитрий Гаджиев]

ну так напишите свой php скрипт, который будет принимать данные, и дальше делать что вам захочется. и в AJAX ссылайтесь не как в каком то примере, а на файл который существует в реальности.

[Johnny Show]

Дмитрий Гаджиев, так php код мой, я его использовал в других функионалах. Может быть нельзя передавать в виде json функцию mail() ??

[Дмитрий Гаджиев]

ThunderCat, батенька, если даже вы не знаете настроено у вас или нет, то к чему задавать какие либо вопросы?

[Дмитрий Гаджиев]

Johnny Show, структура такая получается: вы кодируете данные в JSON, передаете их php скрипту, он раскодирует JSON и эти параметры подставляются в функцию mail()

[Johnny Show]

Дмитрий Гаджиев, что значит я не знаю как настроено? Я этот метод получения данных использовал в разных условиях и все работало, а как только столкнулся с функцией mail() , то пиши пропало.

[Дмитрий Гаджиев]

сорри за вопрос, а сама функция mail() в реальности отправляет письма у вас?

[ThunderCat]

Johnny Show,

а еще после отправки формы, все введенные данные видны в адресной строке, будто я передают GET запросом

Так и есть. Если у вас функция повешена на кнопку субмит, скрипт выполняет отправку формы и переходит на себя(так как не указан экшн формы). Ваш скрипт тупо не успевает сработать.

тестировал чужую функцию , функции js срабатывали :

угу, еще бы, там обработчик повешен на субмит и возвращает фалс(то есть не делать субмит). По уму в начале еще надо превентДефаулт добавить.

В вашем случае: убрать с кнопки тип субмит; или повесить функцию не на онклик, а задать листенер на субмит формы, сделать превентДефаулт и тогда все будет работать.

[ThunderCat]

Дмитрий Гаджиев,

батенька, если даже вы не знаете настроено у вас или нет, то к чему задавать какие либо вопросы?

я тут не причем, мне не надо такие вопросы задавать )

[Дмитрий Гаджиев]

ThunderCat, сорри, не глядя написал)))

[Johnny Show]

Дмитрий Гаджиев, mail() отправляет письма только в папку temp\email в Опенсервере, на почту письма не доходят, может нужно установить и настроить библиотеку phpmailer.

[Johnny Show]

ThunderCat, чтото я не понял : Если у вас функция повешена на кнопку субмит, скрипт выполняет отправку формы и переходит на себя(так как не указан экшн формы). в Аяксе прописан урл к экшну: url: '/contact/send/'. Говорю ж на других функционалах все работает(например авторизация работает, onclick висит, правда на инпуте, может в этом разница. И в урле не показывает введенные данные,в общем там все гуд, хоть и JS с аяксом так же написан ).Единственное отличие это mail()

[Дмитрий Гаджиев]

Johnny Show, не делайте простыню из комментов, поищите самостоятельно ответ на ваш вопрос в инете. вам дали направление, вам этого мало. за вас и за бесплатно, тут никто ничего делать не будет.

[ThunderCat]

Johnny Show, еще раз - по шагам и медленно, как все происходит:
- нажимаем на кнопку, срабатывает функция
- ОДНОВРЕМЕННО с этим форма субмитится(так как кнопке по должности положено субмитить форму, ваша функция на это никак не влияет)
- так как в экшене формы нет урл куда субмититься, по умолчанию форма субмитится на текущий урл, а так как метод тоже не указан - субмит будет гет запросом(откуда собсно у вас в урл строка с параметрами).

в Аяксе прописан урл к экшну: url: '/contact/send/'.

ну, а форме до этого дела нет, ваш запрос отправляется на сервер, но к тому времени как ответ получен страницы которая его запрашивала уже нет, перегрузилась субмитом формы. Скорее всего и запрос не успевает отработать аяксовый.

[Johnny Show]

ThunderCat, в общем var_dump($resData); показывает на строки

$resData['success'] = false;
  $resData['message'] = 'Ошибка отправки!';

такую ошибку:
Это он говорит,что не массив?
bool(true)

Warning: Cannot use a scalar value as an array in D:\OpenServer2\domains\myshop.local\controllers\ContactController.php on line 61

Warning: Cannot use a scalar value as an array in D:\OpenServer2\domains\myshop.local\controllers\ContactController.php on line 62

true

[ThunderCat]

Johnny Show, вы прочли написанное выше? Я поправил ответ, у вас неверно отрабатывает яваскрипт, в итоге завершаясь перезагрузкой страницы. Читайте что написано, там все ответы уже есть.

[Johnny Show]

Я понял,что ошибка в использовании моим предыдущем кодом заключалась в том,что я использовал не массив,а строку, из-за чего нельзя было назначать ключи для вывода сообщений в случае true false, ка это делал ранее, так же type='submit' на кнопке был лишним.
Всесто стандартного алерта добавил модал окно для показа сообщения:)

В общем нашел время для решения данного вопроса и решил не без помощи камрадов данного сайта. За что большое спасибо.

Может кому пригодится. Немного изменив код - получил нужный мне результат:
php

spoiler

function sendAction() {

    $name = trim(htmlspecialchars($_REQUEST['name']));
    $email = trim(htmlspecialchars($_REQUEST['email']));
    $subject = trim(htmlspecialchars($_REQUEST['subject']));
    $msg = trim(htmlspecialchars($_REQUEST['msg']));
    $headers = '';

    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
    $headers .= "From: Отправитель < $email >\r\n"; //Наименование и почта

    if ( (!empty($name)) && ( !empty($email)) && ( !empty($subject)) && ( !empty($msg))) {

        $to = '[e-mail]';
        $message = "Имя: $name \nПочта: $email \nТема: $subject \nТекст: $msg";

        mail($to, $subject, $message, $headers);

    }
}

js

spoiler

$(document).ready(function() {
    $("#form").submit(function() {
        var postData = $(this).serialize();
    $.ajax({
        type: 'POST',
        async: true,
        url: '/contact/send/',
        data: postData,
        success:function() {
            $(this).find("input").val("");
            $('#myModal').modal('show');
      $("#form").trigger("reset");
  }
});
        return false;
});
});