Form Personalizzato con Ajax
Ho problemi con il mio form. Quando viene cliccato il pulsante di invio viene generato un errore 404. Se qualcuno ha suggerimenti sarei grato.
Gestione Ajax del form. Da inserire nel file js del tema.
<script type="text/javascript">
jQuery('#BookingForm').submit(ajaxSubmit);
function ajaxSubmit(){
var BookingForm = jQuery(this).serialize();
jQuery.ajax({
action : 'make_booking',
type : "POST",
url : "/wp-admin/admin-ajax.php",
data : BookingForm,
success: function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
</script>
PHP da inserire in functions.php
function makeBooking(){
global $wpdb;
$type = $_POST["optionsRadios"];
$to = $_POST["to"];
$from = $_POST["from"];
$date = $_POST["date"];
$time = $_POST["time"];
$name = $_POST["name"];
$tel = $_POST["tel"];
$email = $_POST["email"];
$passenger = $_POST["optionsRadios2"];
$other = $_POST["other"];
if( $wpdb->insert('Booking',
array(
'type'=>$type,
'from1'=>$from,
'to1'=>$to,
'date'=>$date,
'time'=>$time,
'name'=>$name,
'tel'=>$tel,
'email'=>$email,
'passenger'=>$passenger,
'other'=>$other
)
) === FALSE ) {
echo "Errore";
}
else {
echo "Invio completato con successo, una ricevuta è stata inviata al tuo indirizzo email.
<br> Il tuo ID di Prenotazione è:<b>ZCA- ".$wpdb->reference . "</b>";
// Prepara il corpo dell'email
$msg = "Riferimento: ZCA-" . $reference . "\nTipo:" . $type . "\nDa:" . $from . "\nA:" . $to . "\nData:" . $date . "\nOra:" . $time . "\nNome:" . $name . "\nNumero:" . $tel . "\nEmail:" . $email . "\nPasseggeri:" . $passenger . "\nAltro:" . $other;
mail("taxi@zcarsglobal.com","Prenotazione",$msg);
mail($email,"Prenotazione Zcars Global","Grazie per la tua richiesta. Ci occuperemo della tua richiesta immediatamente." . $msg);
}
die();
}
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // non realmente necessario
Includo il form HTML poiché continuo a ricevere l'errore 404, forse il problema è qui?
<form method="post" id="BookingForm">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="booking" value="booking" checked>
Prenotazione
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="quotation" value="quotation">
Preventivo
</label>
</div>
<div class="form-group">
<label for="from">Da *</label>
<input name="from" id="from" type="text" class="form-control" placeholder="Dove ti trovi?" required>
</div>
<div class="form-group">
<label for="to">Destinazione *</label>
<input name="to" id="to" type="text" class="form-control" placeholder="Dove vuoi andare?" required>
</div>
<div class="form-group">
<label for="date">Data *</label>
<input name="date" id="date" type="date" class="form-control" required min="<?php echo date("dd-mm-yyyy"); ?>">
</div>
<div class="form-group">
<label for="time">Ora *</label>
<input name="time" id="time" type="time" class="form-control" required>
</div>
<div class="form-group">
<label for="name">Nome *</label>
<input name="name" id="name" type="text" class="form-control" placeholder="Qual è il tuo nome?" required>
</div>
<div class="form-group">
<label for="tel">Numero di Telefono *</label>
<input name="tel" id="tel" type="number" class="form-control" placeholder="Qual è il tuo numero?" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input name="email" id="email" type="email" class="form-control" placeholder="Qual è la tua email?" required>
</div>
<h4>Passeggeri</h4>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
4 o meno
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4to6" value="4to6">
Da 4 a 6
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="6to8" value="6to8">
Da 6 a 8
</label>
</div>
<textarea name="other" class="form-control" rows="3">Per favore scrivi qui qualsiasi altra informazione che dobbiamo sapere</textarea>
<input type="hidden" name="action" value="makeBooking"/>
<input type="submit">
</form>
Il tuo tentativo di inviare le richieste AJAX a wp-admin/admin-ajax.php è corretto, ma sarebbe meglio creare una variabile globale javascript utilizzando wp_localize_script() per rendere disponibili al tuo script in functions.php tutti i dati che normalmente puoi ottenere solo dal lato server di WordPress.
Ad esempio, il tuo codice javascript può trovarsi nella stessa cartella di functions.php in questo modo:
[Cartella del Tema]
-->functions.php
-->js [cartella] --> makebooking.js
Il tuo jQuery in makebooking.js dovrebbe essere così:
jQuery(document).ready(function(event) {
jQuery('#BookingForm').submit(ajaxSubmit);
function ajaxSubmit() {
var BookingForm = jQuery(this).serialize();
jQuery.ajax({
action: 'make_booking',
type: "POST",
url: MBAjax.admin_url,
data: BookingForm,
success: function(data) {
jQuery("#feedback").html(data);
}
});
return false;
}
});
Con makeBooking() che elabora i dati, aggiungi il seguente codice all'inizio del tuo functions.php:
// incorpora il file javascript che effettua la richiesta AJAX
wp_enqueue_script( 'make-booking-ajax','js/makebooking.js', array( 'jquery' ) );
// dichiara l'URL del file che gestisce la richiesta AJAX (wp-admin/admin-ajax.php)
wp_localize_script( 'make-booking-ajax', 'MBAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
add_action('wp_ajax_make_booking', 'makeBooking');
Per ulteriori riferimenti, dai un'occhiata a 5 Suggerimenti per utilizzare Ajax in Wordpress

Ciao, grazie per la tua fantastica risposta! Non ricevo più un errore 404, ma una pagina bianca dopo l'invio. Oppure una volta ho ottenuto l'HTML dell'intera pagina all'interno del div #feedback.

dal tuo codice php, non hai alcuna risposta xhr. Dopo l'invio della mail prova echo "Grazie per la prenotazione"
e sostituisci die()
con exit;
. Tra l'altro, non hai definito $reference
da nessuna parte nel tuo codice. Infine, controlla il tuo file php_error.log per i dettagli.

Non è sufficiente l'echo appena prima dell'invio della mail? Grazie per il suggerimento su $reference, ho sistemato. Uhm php_error.log non mostra alcun errore negli ultimi giorni. Questo è sconcertante.

add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // non strettamente necessario
Inserisci queste due righe sopra la funzione makeBooking.
Ha funzionato per me! Guarda anche come sto inviando l'azione nei dati!
$( "#signupFormTag" ).submit(function( event ) {
event.preventDefault();
var signupForm = jQuery(this).serialize();
jQuery.ajax({
// action : 'signup_paragon',
type : "POST",
url : "/paragaon-3/wp-admin/admin-ajax.php",
data : {
from: signupForm,
action: 'signup_paragon'
},
success: function(data){
console.log(data);
//jQuery("#feedback").html(data);
}
});
// return false;
});

Non puoi utilizzare Ajax su WordPress in quel modo. Ci sono molti tutorial sull'uso di Ajax su WordPress. Penso che il più semplice sia http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

jQuery(document).ready(function($) {
// Esegui il login AJAX all'invio del form
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //chiama wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});
