Отправка письма с вложением через formData
Здравствуйте.
Помогите, пожалуйста, с отправкой письма с вложением. Пытаюсь сделать через formData. Сама отправка срабатывает нормально, все отправляется, письмо доходит. Но вместо того, чтобы после нажатия на кнопку "отправить" появлялось сообщение об успешной отправке, страница перезагружается. Вот код: Форма отправки: <form action method="post" name="calcprojectform1" id="calcprojectform1" enctype='multipart/form-data'> <input class="pole validate[required]" data-prompt-position="Left:-65,35" name="name" type="text" placeholder="Имя" /><br><br> <input class="pole validate[required]" data-prompt-position="Left:-65,35" name="phone" type="text" placeholder="Телефон" /><br><br> <input class="pole validate[required,custom[email]]" data-prompt-position="Left:-65,35" name="mail" type="text" placeholder="Ваш e-mail" /><br><br> <input class="pole" type='file' name='mail_file' data-prompt-position="Left:-65,35"/><br><br> <input class="mainButton_form" name="calc-project-submit1" id="calc-project-submit1" type="submit" value="получить"> </form> Скрипт обработки $(document).on('click', 'input[name="calc-project-submit1"]', function () { if ($('form[name="calcprojectform1"]').validationEngine('validate')) { var form = document.forms.namedItem("calcprojectform1"); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open("POST", "mail.php"); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { data = xhr.responseText; if (data == '1') { $("#calcprojectform1").reset(); $("#calcprojectform1").replaceWith('<div style="padding:15px;background:#fff; font-size:14px;font-family:MuseoSansCyrl_700; color:green;">Спасибо, ваша заявка успешно отправлена.</div>'); style="padding:15px;background:#fff; font-size:14px;font-family:MuseoSansCyrl_700; color:green;">Спасибо, ваша заявка успешно отправлена.</div>') } else { $('#calc-project-submit1').validationEngine('showPrompt', 'Ошибка отправки данных. Попробуйте позже.'); } } } }; xhr.send(formData); } }); Файл отправки php <?php $mailto = "test@yandex.ru"; $charset = "utf-8"; $subject = "Заполнили форму Рассчитать проект"; $content = "text/html"; $status = "<br>"; if (!empty($_POST)) { $name = htmlspecialchars(stripslashes($_POST['name'])); $email = htmlspecialchars(stripslashes($_POST['mail'])); $phone = htmlspecialchars(stripslashes($_POST['phone'])); $picture = ""; $headers = "MIME-Version: 1.0\r\n"; $headers .= "From: \"" . $name . "\" <test@yandex.ru>\r\n"; $headers .= "Bcc: test@yandex.ru\r\n"; $headers .= "X-Mailer: E-mail from my site \r\n"; $sendmessage = "<html><body> <p><b>Имя:</b> " . $name . "</p> <p><b>Телефон:</b> " . $phone . "</p> <p><b>E-mail:</b> " . $email . "</p> </body></html>"; if (!empty($_FILES['mail_file']['tmp_name'])) { $path = $_FILES['mail_file']['tmp_name']; $picture = $_FILES['mail_file']['name']; } $boundary = "--" . md5(uniqid(time())); $headers .="Content-Type: multipart/mixed; boundary=\"" . $boundary . "\"\n"; $multipart .= "--" . $boundary . "\n"; $multipart .= "Content-Type: text/html; charset=$charset\n"; $multipart .= "Content-Transfer-Encoding: Quot-Printed\n\n"; $multipart .= "$sendmessage\n\n"; $message_part = ''; $fp = fopen($path, "r"); if (!$fp) { print "Файл " . $path . " не может быть прочитан"; exit(); } $file = fread($fp, filesize($path)); fclose($fp); $message_part .= "--" . $boundary . "\n"; $message_part .= "Content-Type: application/octet-stream\n"; $message_part .= "Content-Transfer-Encoding: base64\n"; $message_part .= "Content-Disposition: attachment; filename = \"" . $picture . "\"\n\n"; $message_part .= chunk_split(base64_encode($file)) . "\n"; $multipart .= $message_part . "--" . $boundary . "--\n"; if (mail($mailto, $subject, $multipart, $headers)) { echo '1'; } else { echo '2'; } } ?> |
Всё правильно, при нажатии на submit происходит стандартная отправка формы. Можно конечно click тормознуть, но в таком случаи с enter тоже отправиться
$(document).on('submit', '#calcprojectform1', function (e) { if ($('form[name="calcprojectform1"]').validationEngine('validate')) { var form = document.forms.namedItem("calcprojectform1"); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open("POST", "mail.php"); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { data = xhr.responseText; if (data == '1') { $("#calcprojectform1").reset(); $("#calcprojectform1").replaceWith('<div style="padding:15px;background:#fff; font-size:14px;font-family:MuseoSansCyrl_700; color:green;">Спасибо, ваша заявка успешно отправлена.</div>'); style="padding:15px;background:#fff; font-size:14px;font-family:MuseoSansCyrl_700; color:green;">Спасибо, ваша заявка успешно отправлена.</div>') } else { $('#calc-project-submit1').validationEngine('showPrompt', 'Ошибка отправки данных. Попробуйте позже.'); } } } }; xhr.send(formData); } e.preventDefault(); return false; }); |
Skipp, спасибо. Да, так сообщение отправляется и страница не перезагружается. Но сообщение о том, что форма отправлена не выскакивает. То есть, видимо, не срабатывает вот этот код:
if (data == '1') { $("#calcprojectform1").reset(); $("#calcprojectform1").replaceWith('<div style="padding:15px;background:#fff; font-size:14px;font-family:MuseoSansCyrl_700; color:green;">Спасибо, ваша заявка успешно отправлена.</div>'); } else { $('#calc-project-submit1').validationEngine('showPrompt', 'Ошибка отправки данных. Попробуйте позже.'); } Или может его перенести в конец функции? |
Цитата:
А вот данные извне, а уж тем более при их хранении и использовании как параметров, а также отправляемые почтой обязательно подлежать проверке. Тему почтового отправления и имя в From нужно кодировать. |
Да, и отправка срабатывает только когда
$(document).on('click', '#calcprojectform1', function (e) { Если писать $(document).on('submit', '#calcprojectform1', function (e) { то отправка не происходит, и страница перезагружается. |
laimas,
эм... можно подробнее? Какое тогда событие нужно обрабатывать? Делала по аналогии, как здесь: https://javascript.ru/forum/jquery/4...v-s-formy.html |
Цитата:
Цитата:
|
Нет, форма динамически не добавляется, просто показывается только по клику на кнопку.
Да, действительно срабатывает на submit. Это я вызывала событие клика на кнопку, а нужно submit формы. Теперь все отправляется, страница не перезагружается, но сообщение об отправке все равно не появляется. |
Цитата:
$(function() { $('#calcprojectform1').on('submit', function(e){ e.preventDefault(); //отменяем действие по умолчанию - отправление формы //и отправляем ее посредством Ajax, используя при этом jQuery $.ajax({ url: this.action, //url запроса можно брать из формы, таким образом можно использовать этот обработчик для многих форм type: this.method, //метод запроса также берем из формы contentType: false, //обязательно processData: false, //обязательно data: new FormData(this), //получаем данные формы dataType: 'здесь указать тип ожидаемых данных ответа сервера или убрать параметр передавая тип сервером', success: function(data){ //ответ сервера alert(data); } }); }); }); |
laimas,
Спасибо. Сделала, как вы пишете, но обработка все равно до конца не срабатывает. Сообщение отправляется, страница не перезагружается, но сообщение об отправке не выводится. Чего-то даже alert работать перестал... Делаю сейчас так (на отправке через ajax без файлов работает): В файле отправки php в конце: if (mail($mailto, $subject, $multipart, $headers)) { $message_ok = array("ok" => 1, "success_text" => "y"); print json_encode($message_ok); } else { $err = array("ok" => 2, "error_text" => "n"); print json_encode($err); } В js: $('#calcprojectform1').on('submit', function (e) { e.preventDefault(); //отменяем действие по умолчанию - отправление формы //и отправляем ее посредством Ajax, используя при этом jQuery $.ajax({ url: this.action, //url запроса можно брать из формы, таким образом можно использовать этот обработчик для многих форм type: this.method, //метод запроса также берем из формы contentType: false, //обязательно processData: false, //обязательно data: new FormData(this), //получаем данные формы dataType: 'json', success: function (data) { if (data.ok == '1') { $("#calcprojectform1").reset(); $("#calcprojectform1").replaceWith('<div style="padding:15px;background:#fff; font-size:14px;font-family:MuseoSansCyrl_700; color:green;">Спасибо, ваша заявка успешно отправлена.</div>'); } if (data.ok == '2') { $('#calc-project-submit1').validationEngine('showPrompt', 'Ошибка отправки данных. Попробуйте позже.'); } alert(data); alert(data.ok); } }); }); В чем еще может быть дело? Пробовала передавать и число, и boolean. Результат тот же. Где я туплю? |
Часовой пояс GMT +3, время: 03:23. |