Contact Form 7 - Il pulsante Submit non funziona dopo una richiesta Ajax

3 mag 2017, 06:25:52
Visualizzazioni: 27.2K
Voti: 0

Sto utilizzando Contact Form 7 con ajax jquery. La prima parte serve all'utente per inserire il numero del veicolo e l'email.

Se ha successo, caricherà contact form 7 tramite ajax. Quando clicco su submit, viene reindirizzato a una nuova pagina e restituisce 0. Ho fatto una ricerca su Google e ho trovato la funzione wpcf7-submit.

Ho provato a creare una funzione di alert e risponde come previsto. Come posso utilizzarla con contact form 7 e inviare via email i dettagli del form se non ci sono errori?

Codice

form.php

<?php
get_header(); 
// Includi tutte le funzioni 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">Numero di Registrazione Veicolo</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="miaMail@esempio.com">
  </div>
  <button type="submit" class="btn btn-primary" id="submit_payment">Effettua Pagamento</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=Nome,mail=Email,your-platno=Numero Registrazione,your-location=Posizione Parcheggio"]');

        // Visualizza il Form 
        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('Pulsante Submit premuto!');
            }); 

        });
    });    
});

Devo riscrivere il metodo post sul form e inviare via email i dettagli in caso di successo?

4
Commenti

Penso che tu abbia aggiunto il tuo codice jQuery per CF7. Ho ragione?

BlueSuiter BlueSuiter
3 mag 2017 08:39:02

intendi la libreria jQuery? Io non ho aggiunto jQuery

Amran Amran
3 mag 2017 09:23:03

No, non la libreria, stai usando il tuo codice per l'invio della mail..

BlueSuiter BlueSuiter
3 mag 2017 10:12:21

No. Per jQuery, utilizzo semplicemente il codice sopra. Per l'invio della mail, voglio usare la funzione fornita da Contact Form 7. Dal codice precedente che hai creato, sei in grado di inviare il modulo?

Amran Amran
3 mag 2017 10:28:43
Tutte le risposte alla domanda 1
14

Hai caricato il modulo CF-7 utilizzando ajax, il che significa che gli script necessari per quel modulo non sono mai stati eseguiti. E, a causa di questo, il tuo modulo non funziona come previsto.

Devi reinizializzare gli script di CF-7 per il modulo specifico. Ecco il codice PHP aggiornato.

Ora, il tuo ajax sarà:

<?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=Registration No.,your-location=Parking Location"]');

        // Mostra il Modulo 
        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();
}

?>

Aggiornamento: initForm non è più presente da CF7 5.4

Grazie @Chris Pink

3 mag 2017 12:44:39
Commenti

Grazie per l'aiuto. Al momento non sono alla mia scrivania. Darò un aggiornamento più tardi. Posso sapere cosa fa lo script?

Amran Amran
3 mag 2017 13:07:30

Inizierà lo script CF7 sul tuo modulo. Stavi caricando il modulo usando ajax ed è per questo che non si era avviato su quel modulo specifico. Aspetterò la tua risposta. Buona programmazione :)

BlueSuiter BlueSuiter
3 mag 2017 13:09:46

Lo farò. Dove posso trovare i dettagli o la documentazione su questo?

Amran Amran
3 mag 2017 13:22:01

Di quale documentazione hai bisogno?

BlueSuiter BlueSuiter
3 mag 2017 13:22:55

Riguardo lo script. Ad esempio, la funzione dettagliata su 'wpc7InitForm()'

Amran Amran
3 mag 2017 13:40:58

Spero sul sito web di Contact Form 7.

BlueSuiter BlueSuiter
3 mag 2017 13:45:05

Aggiorno il codice con lo script. Ricevo una risposta ma mostra solo lo spinner di caricamento senza inviare alcuna email o validare i dati.

Amran Amran
3 mag 2017 18:37:56

Stai usando un server locale o un server live?

BlueSuiter BlueSuiter
3 mag 2017 22:40:03

È un server live

Amran Amran
3 mag 2017 23:18:01

Ho apportato alcuni aggiornamenti al codice, per favore controllali.

BlueSuiter BlueSuiter
4 mag 2017 08:43:13

Continuiamo questa discussione nella chat.

Amran Amran
4 mag 2017 09:34:48

Sono grato per questa risposta perché mi ha indirizzato nella direzione giusta, ma devo far notare che non ha funzionato per me così com'era. Ricevevo un errore che diceva che $form.wpc7InitForm() non era una funzione, il che mi ha portato a una soluzione trovata sui forum di Wordpress. Si è scoperto che la funzione non è $form.wpc7InitForm(), ma piuttosto wpc7.initForm($form) ... vedi la risposta di @tapitoconnectey verso il fondo - https://wordpress.org/support/topic/wpcf7initform-is-not-a-function/

mroncetwice mroncetwice
16 gen 2018 15:06:34

La risposta di @mroncetwice è stata aggiornata in base al tuo commento, spero che ora funzioni senza errori. Grazie per l'aggiornamento. :)

BlueSuiter BlueSuiter
17 gen 2018 06:24:13

Nota: initForm non è più presente a partire da CF7 5.4

Chris Pink Chris Pink
16 mag 2021 18:33:38
Mostra i restanti 9 commenti