-1

Есть два обработчика формы. Я их соединил, все работает. Но есть проблема, первый раз срабатывают оба обработчика, но второй раз форма отправляется только в первый. Возможно проблема в хостинге, который использую, но может быть и в коде.

index.html

<form action="sender.php" method="post" class="telegram-form">
            <input type="text" class="name" name="name" placeholder="Имя" />
            <input type="text" name="surname" placeholder="Фамилия" />
            <input type="text" class="phone" name="phone" placeholder="Телефон" />
            <input type="email" name="email" placeholder="Email" />
            <textarea
                name="text"
                id=""
                cols="30"
                rows="10"
                placeholder="Введите текст"
            ></textarea>
            <button type="submit" class="send-form btn">Отправить форму</button>
            <div class="status"></div>
        </form>

Отправка на почту

js

$(document).ready(function () {
    $('.phone').mask('+380 (99) 999-99-99')

    $('.send-form').click(function () {
        var form = $(this).closest('form')

        if (form.valid()) {
            form.css('opacity', '.5')
            var actUrl = form.attr('action')

            $.ajax({
                url: actUrl,
                type: 'post',
                dataType: 'html',
                data: form.serialize(),
                success: function (data) {
                    form.html(data)
                    form.css('opacity', '1')
                    form.find('.status').html('форма отправлена успешно')
                },
                error: function () {
                    form.find('.status').html('серверная ошибка')
                },
            })
        }
    })
})

P.S : jquery.validate.min и jquery.maskedinput

php

<?php
$name = $_POST['name'];
$surname = $_POST['surname'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$text = $_POST['text'];

$to = "email";
$date = date("d.m.Y");
$time = date("h:i");
$from = $email;
$subject = "Заявка c сайта";


$msg = "
    Имя: $name /n
    Фамилия: $surname /n
    Телефон: $phone /n
    Почта: $email /n
    Текст: $text";
mail($to, $subject, $msg, "From: $from ");

?>

Отправка в телеграм

js

$('.telegram-form').on('submit', function (event) {
    event.stopPropagation()
    event.preventDefault()

    let form = this,
        submit = $('.submit', form),
        data = new FormData(),
        files = $('input[type=file]')

    $('.submit', form).val('Отправка...')
    $('input, textarea', form).attr('disabled', '')

    data.append('name', $('[name="name"]', form).val())
    data.append('phone', $('[name="phone"]', form).val())
    data.append('email', $('[name="email"]', form).val())
    data.append('text', $('[name="text"]', form).val())
    data.append('file', $('[name="file"]', form).val())

    files.each(function (key, file) {
        let cont = file.files
        if (cont) {
            $.each(cont, function (key, value) {
                data.append(key, value)
            })
        }
    })

    $.ajax({
        url: 'ajax.php',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        xhr: function () {
            let myXhr = $.ajaxSettings.xhr()

            if (myXhr.upload) {
                myXhr.upload.addEventListener(
                    'progress',
                    function (e) {
                        if (e.lengthComputable) {
                            let percentage = (e.loaded / e.total) * 100
                            percentage = percentage.toFixed(0)
                            $('.submit', form).html(percentage + '%')
                        }
                    },
                    false
                )
            }

            return myXhr
        },
        error: function (jqXHR, textStatus) {
        },
        complete: function () {
            console.log('Complete')
            form.reset()
        },
    })

    return false
})

php ( ajax.php )

<?php
$tg_bot_token = "";

$chat_id = "";

$text = '';

foreach ($_POST as $key => $val) {
    $text .= $key . ": " . $val . "\n";
}

$text .= "\n" . $_SERVER['REMOTE_ADDR'];
$text .= "\n" . date('d.m.y H:i:s');

$param = [
    "chat_id" => $chat_id,
    "text" => $text
];

$url = "https://api.telegram.org/bot" . $tg_bot_token . "/sendMessage?" . http_build_query($param);

var_dump($text);

file_get_contents($url);

foreach ($_FILES as $file) {

    $url = "https://api.telegram.org/bot" . $tg_bot_token . "/sendDocument";

    move_uploaded_file($file['tmp_name'], $file['name']);

    $document = new \CURLFile($file['name']);

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, ["chat_id" => $chat_id, "document" => $document]);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type:multipart/form-data"]);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

    $out = curl_exec($ch);

    curl_close($ch);

    unlink($file['name']);
}

die('1');

1
  • Потому что надо было не "соединять", а сделать одну форму с одним обработчиком. 9 сен в 13:27

1 ответ 1

0
$(document).ready(function () {
    $('.phone').mask('+380 (99) 999-99-99')

    $('.send-form').click(function () { // эта привязка пропадает после того как...
        var form = $(this).closest('form')

        if (form.valid()) {
            form.css('opacity', '.5')
            var actUrl = form.attr('action')

            $.ajax({
                url: actUrl,
                type: 'post',
                dataType: 'html',
                data: form.serialize(),
                success: function (data) {
                    form.html(data)  // ... после того как форма была заменена
                    form.css('opacity', '1')
                    form.find('.status').html('форма отправлена успешно')
                },
                error: function () {
                    form.find('.status').html('серверная ошибка')
                },
            })
        }
    })
})

Нужно использовать контекстную привязку:

$(document).click('.send-form', function () { ...
2
  • Не помогло, форма вообще не отправляется
    – khs
    3 фев 2022 в 8:09
  • Да, прошу прощения, $(document).on('click','.send-form',function(){ ... });. 3 фев 2022 в 9:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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