Contact Form 7 - El botón Submit del formulario no funciona después de una petición Ajax

3 may 2017, 06:25:52
Vistas: 27.2K
Votos: 0

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?

4
Comentarios

Creo que has añadido tu propio código jQuery para CF7. ¿Estoy en lo correcto?

BlueSuiter BlueSuiter
3 may 2017 08:39:02

¿Te refieres a la biblioteca jQuery? Yo no añadí el jQuery

Amran Amran
3 may 2017 09:23:03

No, no la biblioteca, ¿estás usando tu propio código para el envío de correos?

BlueSuiter BlueSuiter
3 may 2017 10:12:21

No. Para jQuery, solo uso el código anterior. Para el envío del correo, quiero usar la función proporcionada por Contact Form 7. Del código previo que hiciste, ¿puedes enviar el formulario?

Amran Amran
3 may 2017 10:28:43
Todas las respuestas a la pregunta 1
14

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

3 may 2017 12:44:39
Comentarios

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 Amran
3 may 2017 13:07:30

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 BlueSuiter
3 may 2017 13:09:46

Lo haré. ¿Dónde puedo obtener los detalles o documentación sobre eso?

Amran Amran
3 may 2017 13:22:01

¿Qué documentación deseas?

BlueSuiter BlueSuiter
3 may 2017 13:22:55

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

Amran Amran
3 may 2017 13:40:58

Espero que esté en el sitio web de Contact Form 7.

BlueSuiter BlueSuiter
3 may 2017 13:45:05

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 Amran
3 may 2017 18:37:56

¿Lo estás usando en un servidor local o en un servidor en vivo?

BlueSuiter BlueSuiter
3 may 2017 22:40:03

Es un servidor en vivo

Amran Amran
3 may 2017 23:18:01

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

BlueSuiter BlueSuiter
4 may 2017 08:43:13

Continuemos esta discusión en el chat.

Amran Amran
4 may 2017 09:34:48

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 mroncetwice
16 ene 2018 15:06:34

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

BlueSuiter BlueSuiter
17 ene 2018 06:24:13

Nota: initForm ya no está presente desde CF7 5.4

Chris Pink Chris Pink
16 may 2021 18:33:38
Mostrar los 9 comentarios restantes