Form Personalizzato con Ajax

23 apr 2015, 18:37:20
Visualizzazioni: 49.9K
Voti: 4

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>





1
Commenti

non esiste un argomento action per ajax, dovrebbe far parte di data.

Milo Milo
23 apr 2015 19:58:19
Tutte le risposte alla domanda 4
4

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

23 apr 2015 21:21:12
Commenti

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.

raikkonen raikkonen
23 apr 2015 22:52:19

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.

CeganB CeganB
24 apr 2015 10:25:56

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.

raikkonen raikkonen
25 apr 2015 01:03:26

ciao, perché stai chiamando MBAjax.BookingForm, non esiste un membro così. è solo una variabile.

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

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

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/

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

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

Puoi aggiungere una spiegazione sul perché ciò potrebbe risolvere il problema?

nmr nmr
14 ago 2019 13:10:06