Formulario Personalizado con Ajax

23 abr 2015, 18:37:20
Vistas: 49.9K
Votos: 4

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>





1
Comentarios

no existe un argumento action para ajax, eso debería ser parte de data.

Milo Milo
23 abr 2015 19:58:19
Todas las respuestas a la pregunta 4
4

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

23 abr 2015 21:21:12
Comentarios

¡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.

raikkonen raikkonen
23 abr 2015 22:52:19

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.

CeganB CeganB
24 abr 2015 10:25:56

¿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.

raikkonen raikkonen
25 abr 2015 01:03:26

hola, ¿por qué estás llamando a MBAjax.BookingForm? no existe un miembro así. es solo una variable.

pcarvalho pcarvalho
1 jul 2016 00:17:39
0
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;

            });
11 jul 2018 19:37:32
0

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/

23 abr 2015 20:13:27
1
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();
    });

});
14 ago 2019 10:59:21
Comentarios

¿Puedes agregar una explicación de por qué eso podría resolver el problema?

nmr nmr
14 ago 2019 13:10:06