Форум

KateU · #1 (**permalink**) 09.10.2017, 10:37

Здравствуйте.
Помогите, пожалуйста, с отправкой письма с вложением. Пытаюсь сделать через 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';
    }
}
?>

Skipp · #2 (**permalink**) 09.10.2017, 11:49

Всё правильно, при нажатии на 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;
});

KateU · #3 (**permalink**) 09.10.2017, 12:17

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', 'Ошибка отправки данных. Попробуйте позже.');
                    }

Или может его перенести в конец функции?

laimas · #4 (**permalink**) 09.10.2017, 12:25

Сообщение от KateU

То есть, видимо, не срабатывает вот этот код

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

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

KateU · #5 (**permalink**) 09.10.2017, 12:28

Да, и отправка срабатывает только когда

$(document).on('click', '#calcprojectform1', function (e) {

Если писать

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

то отправка не происходит, и страница перезагружается.

KateU · #6 (**permalink**) 09.10.2017, 12:36

laimas,
эм... можно подробнее? Какое тогда событие нужно обрабатывать?
Делала по аналогии, как здесь: https://javascript.ru/forum/jquery/4...v-s-formy.html

laimas · #7 (**permalink**) 09.10.2017, 12:39

Сообщение от KateU

.on('submit', '#calcprojectform1'

Это делегирование обработчика, у вас что форма динамически на страницу добавляется?

Сообщение от KateU

Да, и отправка срабатывает только когда

Не правильно вы бутерброд кушаете, дядя Федор, именно onsubmit и надо обрабатывать, и все будет работать.

KateU · #8 (**permalink**) 09.10.2017, 12:52

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

Да, действительно срабатывает на submit. Это я вызывала событие клика на кнопку, а нужно submit формы. Теперь все отправляется, страница не перезагружается, но сообщение об отправке все равно не появляется.

laimas · #9 (**permalink**) 09.10.2017, 13:06

Сообщение от KateU

Нет, форма динамически не добавляется

Тогда зачем делегирование? Так и устанавливайте обработчик

$(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);
            }
        });
    });
});

KateU · #10 (**permalink**) 09.10.2017, 21:19

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. Результат тот же. Где я туплю?

Форум

Справочник

Discord чат

Курсы javascript