Contact Form 7 - El botón Submit del formulario no funciona después de una petición Ajax
Estoy usando Contact Form 7 con ajax jquery
. La primera parte es para que el usuario inserte el número de vehículo
y el email
.
Si tiene éxito, cargará Contact Form 7 vía ajax. Cuando hago clic en enviar, redirecciona a una nueva página y muestra 0. He investigado en Google y encontré la función wpcf7-submit
.
Intenté hacer una función de alerta y responde como se esperaba. ¿Cómo puedo usarlo con Contact Form 7 y enviar por email los detalles del formulario si no hay errores?
Código
form.php
<?php
get_header();
// Incluir todas las funciones del tema
?>
<form name="season-form" class="form-horizontal" method="post" action="">
<div class="form-group form-group-lg">
<label for="carNo" id="label-cust">Número de Registro del Vehículo</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="miCorreo@ejemplo.com">
</div>
<button type="submit" class="btn btn-primary" id="submit_payment">Realizar Pago</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=Nombre,mail=Email,your-platno=Número de Registro,your-location=Ubicación de Estacionamiento"]');
// Mostrar el Formulario
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('¡Botón de envío presionado!');
});
});
});
});
¿Tengo que reescribir el método post en el formulario y enviar por email los detalles si tiene éxito?

Has estado cargando el formulario CF-7 usando ajax
, lo que significa que los scripts requeridos para ese formulario nunca se ejecutaron. Por eso, tu formulario no funciona como se esperaba.
Debes reiniciar
los scripts de CF-7 para el formulario específico. Aquí está el código PHP actualizado.
Ahora, tu ajax será:
<?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=Nombre,mail=Correo,your-platno=Número de registro,your-location=Ubicación de estacionamiento"]');
// Mostrar el formulario
echo do_shortcode('[contact-form-7 id="6959" title="Formulario de pago de temporada_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();
}
?>
Actualización: initForm ya no está presente desde CF7 5.4
Gracias @Chris Pink

Gracias por la ayuda. No estoy frente a mi escritorio ahora. Daré la actualización más tarde. ¿Podría saber qué hace el script?

Iniciará el script CF7
en tu formulario. Estabas cargando el formulario usando ajax por lo que no se iniciaba en ese formulario en particular. Esperaré tu respuesta. Feliz codificación :)

Con respecto al script. Por ejemplo, la función detallada en 'wpc7InitForm()'

Actualicé el código con el script. Da una respuesta pero solo muestra el spinner de carga sin enviar ningún correo o validar los datos.

He realizado algunas actualizaciones en el código, por favor revísalas.

Continuemos esta discusión en el chat.

Estoy agradecido por esta respuesta porque me guió en la dirección correcta, pero debo señalar que no funcionó para mí tal cual. Estaba recibiendo un error que decía que $form.wpc7InitForm() no era una función, lo que me llevó a una solución encontrada en los foros de Wordpress. Resultó que la función no es $form.wpc7InitForm()
, sino más bien wpc7.initForm($form)
... ver la respuesta de @tapitoconnectey cerca del final - https://wordpress.org/support/topic/wpcf7initform-is-not-a-function/

La respuesta de @mroncetwice ha sido actualizada según tu comentario, espero que funcione ahora sin errores. Gracias por la actualización. :)
