Contact Form 7 - Il pulsante Submit non funziona dopo una richiesta Ajax
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?
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
Grazie per l'aiuto. Al momento non sono alla mia scrivania. Darò un aggiornamento più tardi. Posso sapere cosa fa lo script?
Amran
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
Riguardo lo script. Ad esempio, la funzione dettagliata su 'wpc7InitForm()'
Amran
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
Continuiamo questa discussione nella chat.
Amran
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
La risposta di @mroncetwice è stata aggiornata in base al tuo commento, spero che ora funzioni senza errori. Grazie per l'aggiornamento. :)
BlueSuiter