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?
Amran
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 :)
BlueSuiter
Con respecto al script. Por ejemplo, la función detallada en 'wpc7InitForm()'
Amran
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.
Amran
He realizado algunas actualizaciones en el código, por favor revísalas.
BlueSuiter
Continuemos esta discusión en el chat.
Amran
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/
mroncetwice
La respuesta de @mroncetwice ha sido actualizada según tu comentario, espero que funcione ahora sin errores. Gracias por la actualización. :)
BlueSuiter