Formulario Personalizado con Ajax
Estoy teniendo problemas con mi formulario. Cuando se hace clic en el botón de enviar aparece un error 404. Si alguien tiene alguna sugerencia se lo agradecería.
Manejo Ajax del formulario. Va en el archivo 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 que va en 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 "Error";
}
else {
echo "Envío exitoso, se ha enviado un recibo por correo electrónico a su dirección de email.
<br> Su ID de Reserva es:<b>ZCA- ".$wpdb->reference . "</b>";
//Preparar cuerpo del email
$msg = "Referencia: ZCA-" . $reference . "\nTipo:" . $type . "\nDesde:" . $from . "\nHasta:" . $to . "\nFecha:" . $date . "\nHora:" . $time . "\nNombre:" . $name . "\nNúmero:" . $tel . "\nEmail:" . $email . "\nPasajeros:" . $passenger . "\nOtros:" . $other;
mail("taxi@zcarsglobal.com","Reserva",$msg);
mail($email,"Reserva Zcars Global","Gracias por su consulta. Nos ocuparemos de su solicitud inmediatamente." . $msg);
}
die();
}
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // no es realmente necesario
Incluyo el formulario HTML ya que sigo obteniendo el error 404, ¿tal vez sea algo aquí?
<form method="post" id="BookingForm">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="booking" value="booking" checked>
Reserva
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="quotation" value="quotation">
Cotización
</label>
</div>
<div class="form-group">
<label for="from">Desde *</label>
<input name="from" id="from" type="text" class="form-control" placeholder="¿Dónde está?" required>
</div>
<div class="form-group">
<label for="to">Destino *</label>
<input name="to" id="to" type="text" class="form-control" placeholder="¿A dónde va?" required>
</div>
<div class="form-group">
<label for="date">Fecha *</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">Hora *</label>
<input name="time" id="time" type="time" class="form-control" required>
</div>
<div class="form-group">
<label for="name">Nombre *</label>
<input name="name" id="name" type="text" class="form-control" placeholder="¿Cuál es su nombre?" required>
</div>
<div class="form-group">
<label for="tel">Número de Teléfono *</label>
<input name="tel" id="tel" type="number" class="form-control" placeholder="¿Cuál es su número?" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input name="email" id="email" type="email" class="form-control" placeholder="¿Cuál es su email?" required>
</div>
<h4>Pasajeros</h4>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
4 o menos
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4to6" value="4to6">
4 a 6
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="6to8" value="6to8">
6 a 8
</label>
</div>
<textarea name="other" class="form-control" rows="3">Por favor escriba aquí cualquier otra información que necesitemos saber</textarea>
<input type="hidden" name="action" value="makeBooking"/>
<input type="submit">
</form>

Tu intento de enviar tus solicitudes AJAX a wp-admin/admin-ajax.php es correcto, pero sería mejor crear una variable global en JavaScript usando wp_localize_script() para hacer disponibles datos en tu script dentro de functions.php que normalmente solo podrías obtener del lado del servidor de WordPress.
Por ejemplo, tu código JavaScript puede estar en la misma carpeta que functions.php así:
[Carpeta del Tema]
-->functions.php
-->js [carpeta] --> makebooking.js
Tu jQuery en makebooking.js debería verse así:
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() procesando los datos, agrega lo siguiente al principio de tu functions.php:
// incrusta el archivo JavaScript que realiza la solicitud AJAX
wp_enqueue_script( 'make-booking-ajax','js/makebooking.js', array( 'jquery' ) );
// declara la URL al archivo que maneja la solicitud 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');
Para más referencia, revisa 5 Tips for using Ajax in Wordpress

¡Hola, gracias por tu increíble respuesta! Ya no recibo un error 404, pero ahora obtengo una página en blanco al enviar. O en una ocasión recibí el HTML de toda la página dentro del div #feedback.

En tu código PHP, no tienes ninguna respuesta XHR. Después de enviar el correo, intenta echo "Gracias por reservar"
y reemplaza die()
con exit;
. Por cierto, no has definido $reference
en ninguna parte de tu código. Por último, revisa tu archivo php_error.log para más detalles.

¿No es suficiente el echo justo antes del envío del correo? Gracias por lo de $reference, ya lo corregí. Hmm, php_error.log no muestra ningún error en los últimos días. Esto es desconcertante.

add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // no es realmente necesario
Coloca estas dos líneas encima de la función makeBooking.
¡Funcionó para mí! Además, ¡observa cómo estoy enviando la acción en los datos!
$( "#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;
});

No puedes usar Ajax en WordPress de esa manera. Hay muchos tutoriales sobre cómo usar Ajax en WordPress. Creo que el más sencillo es http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

jQuery(document).ready(function($) {
// Realizar inicio de sesión AJAX al enviar el formulario
$('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', //llama a 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();
});
});
