Contact Form 7 - Форма отправки не работает после Ajax-запроса

3 мая 2017 г., 06:25:52
Просмотры: 27.2K
Голосов: 0

Я использую Contact Form 7 с ajax jquery. Первая часть предназначена для того, чтобы пользователь ввел номер транспортного средства и email.

В случае успеха, она загрузит contact form 7 через ajax. Когда я нажимаю отправить, происходит перенаправление на новую страницу и выводится 0. Я провел исследование в Google и обнаружил функцию wpcf7-submit.

Я попробовал сделать функцию alert, и она сработала как ожидалось. Как мне использовать её с contact form 7 и отправлять детали формы по email, если в форме нет ошибок?

Код

form.php

<?php
get_header(); 
// Подключить все функции темы    
?>

<form name="season-form" class="form-horizontal" method="post" action="">
  <div class="form-group form-group-lg">
    <label for="carNo" id="label-cust">Регистрационный номер транспортного средства</label>
    <input type="text" class="form-control" name="vehicle_no" id="vehicle_no" placeholder="BHK1991">
  </div>
  <div class="form-group form-group-lg">
    <label for="email" id="email">Email</label>
    <input type="email" class="form-control" name="email" id="email" placeholder="myMail@example.com">
  </div>
  <button type="submit" class="btn btn-primary" id="submit_payment">Совершить платеж</button>
</form>
<div id="result"></div>

<?php get_footer(); ?>

function.php

function _myConfirmHandler()
{
    if(isset($_POST['vehicle_no']))
    {
        $vehicle_no = $_POST['vehicle_no'];
        $email = $_POST['email'];

        echo do_shortcode('[cfdb-table form="season parking form_copy" show="your-name,mail,your-platno,your-location" filter="your-platno=' . $vehicle_no . '" headers="your-name=Имя,mail=Email,your-platno=Регистрационный номер,your-location=Место парковки"]');

        // Отобразить форму 
        echo do_shortcode('[contact-form-7 id="6959" title="Payment season Form_Post"]');
    }

    wp_die();
}

add_action('wp_ajax_confirmRequest', '_myConfirmHandler');
add_action('wp_ajax_nopriv_confirmRequest', '_myConfirmHandler');

jquery.js

jQuery(document).ready(function($) {
    $('#submit_payment').click(function(e){
        e.preventDefault();
        var str = $("form[name=season-form]").serialize();
        //alert(str);
        $.ajax({
            type: "POST",
            url: '//www.ktmparking.com.my/wp-admin/admin-ajax.php',
            data: str + '&action=confirmRequest' 
        }).done(function(data){
            $("#result").html(data);

            $(".cal").datepicker({
            showOn: "button",
            dateFormat: "dd-mm-yy",
                buttonImage: "http://theonlytutorials.com/demo/x_office_calendar.png",
                buttonImageOnly: true,
                showAnim: 'slideDown',
                duration: 'fast',
                showButtonPanel: true
            });

            $('.wpcf7-submit').click(function(e) {
                e.preventDefault();
                alert('Кнопка отправки нажата!');
            }); 

        });
    });    
});

Нужно ли мне переписать метод post в форме и отправлять детали по email в случае успеха?

4
Комментарии

Думаю, ты добавил свой собственный код на jQuery для CF7. Я прав?

BlueSuiter BlueSuiter
3 мая 2017 г. 08:39:02

ты имеешь в виду библиотеку jQuery? Я не добавлял jQuery

Amran Amran
3 мая 2017 г. 09:23:03

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

BlueSuiter BlueSuiter
3 мая 2017 г. 10:12:21

Нет. Для jQuery я просто использую приведенный выше код. Для отправки письма я хочу использовать функцию, предоставляемую Contact Form 7. Из предыдущего кода, который вы сделали, вы можете отправить форму?

Amran Amran
3 мая 2017 г. 10:28:43
Все ответы на вопрос 1
14

Вы загружали форму CF-7 с использованием ajax, из-за чего необходимые скрипты для этой формы не выполнялись. Именно поэтому ваша форма не работала так, как ожидалось.

Вам нужно переинициализировать скрипты CF-7 для конкретной формы. Вот обновленный PHP-код.

Теперь ваш ajax будет выглядеть так:

<?php

function _myConfirmHandler()
{
    if(isset($_POST['vehicle_no']))
    {
        $vehicle_no = $_POST['vehicle_no'];
        $email = $_POST['email'];

        echo do_shortcode('[cfdb-table form="season parking form_copy" show="your-name,mail,your-platno,your-location" filter="your-platno=' . $vehicle_no . '" headers="your-name=Name,mail=Email,your-platno=Регистрационный номер,your-location=Место парковки"]');

        // Отображаем форму 
        echo do_shortcode('[contact-form-7 id="6959" title="Payment season Form_Post"]');
    ?>
     <script>
        jQuery('.wpcf7 > form').initForm();
        var urL = jQuery('.wpcf7 > form').attr('action').split('#');
        jQuery('.wpcf7 > form').attr('action', "#" + urL[1]);
    </script>
    <?php
    }

    wp_die();
}

?>

Обновление: Метод initForm больше не поддерживается в CF7 версии 5.4 и выше.

Спасибо @Chris Pink

3 мая 2017 г. 12:44:39
Комментарии

Спасибо за помощь. Сейчас я не за рабочим столом. Обновлю информацию позже. Можете сказать, что делает этот скрипт?

Amran Amran
3 мая 2017 г. 13:07:30

Он инициализирует скрипт CF7 для вашей формы. Вы загружали форму через ajax, из-за чего он не инициализировался для конкретной формы. Буду ждать вашего ответа. Удачного кодинга :)

BlueSuiter BlueSuiter
3 мая 2017 г. 13:09:46

Хорошо. Где я могу найти подробности или документацию по этому поводу?

Amran Amran
3 мая 2017 г. 13:22:01

Документацию чего именно вы хотите?

BlueSuiter BlueSuiter
3 мая 2017 г. 13:22:55

Относительно скрипта. Например, подробности о функции 'wpc7InitForm()'

Amran Amran
3 мая 2017 г. 13:40:58

Я надеюсь найти это на сайте Contact Form 7.

BlueSuiter BlueSuiter
3 мая 2017 г. 13:45:05

Я обновил код сценарием. Он дает ответ, но просто показывает индикатор загрузки без отправки письма или проверки данных.

Amran Amran
3 мая 2017 г. 18:37:56

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

BlueSuiter BlueSuiter
3 мая 2017 г. 22:40:03

Это рабочий сервер

Amran Amran
3 мая 2017 г. 23:18:01

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

BlueSuiter BlueSuiter
4 мая 2017 г. 08:43:13

Давайте продолжим это обсуждение в чате.

Amran Amran
4 мая 2017 г. 09:34:48

Я благодарен за этот ответ, потому что он направил меня в правильном направлении, но должен отметить, что он не сработал у меня в исходном виде. Я получал ошибку, что $form.wpc7InitForm() не является функцией, что привело меня к исправлению, найденному на форумах WordPress. Оказалось, что функция называется не $form.wpc7InitForm(), а wpc7.initForm($form) ... см. ответ от @tapitoconnectey внизу - https://wordpress.org/support/topic/wpcf7initform-is-not-a-function/

mroncetwice mroncetwice
16 янв. 2018 г. 15:06:34

Ответ @mroncetwice был обновлен согласно вашему комментарию, надеюсь теперь он будет работать без ошибок. Спасибо за обновление. :)

BlueSuiter BlueSuiter
17 янв. 2018 г. 06:24:13

Обратите внимание, initForm больше не присутствует начиная с CF7 5.4

Chris Pink Chris Pink
16 мая 2021 г. 18:33:38
Показать остальные 9 комментариев