Contact Form 7 - Форма отправки не работает после Ajax-запроса
Я использую 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 в случае успеха?

Вы загружали форму 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

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

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

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

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

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

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