Formular Personalizat cu Ajax
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>
Î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

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.

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.

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.

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

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/

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