Formular Personalizat cu Ajax

23 apr. 2015, 18:37:20
Vizualizări: 49.9K
Voturi: 4

Am probleme cu formularul meu. Când se apasă butonul de trimitere apare o eroare 404. Dacă cineva are sugestii, aș fi recunoscător.

Gestionarea formularului prin Ajax. Se pune în fișierul js al temei.

<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 care merge în 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 "Eroare";
    }
    else {
        echo "Trimiterea a fost realizată cu succes, o confirmare a fost trimisă pe adresa dvs. de email.       
        <br> ID-ul rezervării dvs. este:<b>ZCA- ".$wpdb->reference . "</b>";

        //Pregătire conținut email
        $msg = "Referință: ZCA-" . $reference . "\nTip:" . $type . "\nDe la:" . $from . "\nLa:" . $to . "\nData" . $date . "\nOra:" . $time . "\nNume:" . $name . "\nTelefon:" . $tel . "\nEmail:" . $email . "\nPasageri:" . $passenger . "\nAlte detalii:" . $other;
        mail("taxi@zcarsglobal.com","Rezervare",$msg);
        mail($email,"Rezervare Zcars Global","Vă mulțumim pentru solicitare. Vom procesa cererea dvs. cât mai curând posibil." . $msg);

    }
    die();
}
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // nu este neapărat necesar

Includ și formularul HTML deoarece încă primesc eroarea 404, poate este ceva aici?

<form method="post" id="BookingForm">

  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="booking" value="booking" checked>
        Rezervare
    </label>
  </div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="quotation" value="quotation">
    Ofertă de preț
  </label>
</div>

  <div class="form-group">
    <label for="from">De la *</label>
    <input name="from" id="from" type="text" class="form-control" placeholder="De unde plecați?" required>
  </div>
  <div class="form-group">
     <label for="to">Către *</label>
    <input name="to" id="to" type="text" class="form-control" placeholder="Unde mergeți?" 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">Nume *</label>
    <input name="name" id="name" type="text" class="form-control" placeholder="Care este numele dvs.?" required>
  </div>
    <div class="form-group">
    <label for="tel">Număr de telefon *</label>
    <input name="tel" id="tel" type="number" class="form-control" placeholder="Care este numărul dvs.?" required>
  </div>
  <div class="form-group">
    <label for="email">Email *</label>
    <input name="email" id="email" type="email" class="form-control" placeholder="Care este adresa dvs. de email?" required>
  </div>

  <h4>Pasageri</h4>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
        4 sau mai puțin
    </label>
  </div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios2" id="4to6" value="4to6">
    4 până la 6
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios2" id="6to8" value="6to8">
    6 până la 8
  </label>
</div>
<textarea name="other" class="form-control" rows="3">Vă rugăm scrieți aici orice altă informație trebuie să știm</textarea>
 <input type="hidden" name="action" value="makeBooking"/>
  <input type="submit">
</form>





1
Comentarii

nu există argument action pentru ajax, acesta ar trebui să facă parte din data.

Milo Milo
23 apr. 2015 19:58:19
Toate răspunsurile la întrebare 4
4

Încercarea ta de a trimite cererile AJAX către wp-admin/admin-ajax.php este corectă, dar va fi mai bine să creezi o variabilă globală javascript folosind wp_localize_script() pentru a face disponibile orice date scriptului tău în functions.php pe care le poți obține în mod normal doar din partea de server a WordPress.

De exemplu, codul tău javascript poate fi în același folder cu functions.php astfel:

[Folder Temă]

-->functions.php

-->js [folder] --> makebooking.js

JQuery-ul tău în makebooking.js ar trebui să arate astfel:

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;
  }
});

Cu makeBooking() procesând datele, adaugă următoarele în partea de sus a functions.php:

// încorporează fișierul javascript care face cererea AJAX
wp_enqueue_script( 'make-booking-ajax','js/makebooking.js', array( 'jquery' ) );

// declară URL-ul către fișierul care gestionează cererea 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');

Pentru mai multe referințe, consultă 5 Tips for using Ajax in Wordpress

23 apr. 2015 21:21:12
Comentarii

Salut, mulțumesc pentru răspunsul tău minunat! Nu mai primesc eroarea 404, dar acum apare o pagină goală la trimitere. Sau, o dată am primit HTML-ul întregii pagini în interiorul div-ului #feedback.

raikkonen raikkonen
23 apr. 2015 22:52:19

din codul tău php, nu ai niciun răspuns xhr. După trimiterea mailului, încearcă echo "Mulțumesc pentru rezervare" și înlocuiește die() cu exit;. Apropo, nu ai definit $reference nicăieri în codul tău. În final, verifică fișierul php_error.log pentru detalii.

CeganB CeganB
24 apr. 2015 10:25:56

Nu este suficient echo-ul de înainte de trimiterea mailului? Mulțumesc pentru observația cu $reference, am rezolvat asta. Hmm php_error.log nu arată nicio eroare în ultimele zile. Este derutant.

raikkonen raikkonen
25 apr. 2015 01:03:26

salut, de ce apelezi MBAjax.BookingForm, nu există niciun membru de genul ăsta. e doar o variabilă.

pcarvalho pcarvalho
1 iul. 2016 00:17:39
0
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // nu este chiar necesar

Pune aceste două linii înainte de funcția makeBooking.

A funcționat pentru mine! De asemenea, observă cum trimit acțiunea în data!

$( "#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 iul. 2018 19:37:32
0

Nu poți folosi Ajax în WordPress în acest mod. Există multe tutoriale despre utilizarea Ajax în WordPress. Cred că cel mai simplu este http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

23 apr. 2015 20:13:27
1
jQuery(document).ready(function($) {

 // Realizează autentificare AJAX la trimiterea formularului
    $('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', //apelează 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 aug. 2019 10:59:21
Comentarii

Poți adăuga o explicație, de ce ar putea asta rezolva problema?

nmr nmr
14 aug. 2019 13:10:06