Benutzerdefinierte Form mit Ajax

Ich habe Probleme mit meiner Form. Wenn der Submit-Button geklickt wird, wird ein 404-Fehler ausgegeben. Wenn jemand irgendwelche Vorschläge hat, wäre ich dankbar.

Ajax-Handhabung von Form. In das Thema js gehen.

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

PHP geht in die 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 "Submission successful, an email receipt has been sent to your email address. 
Your Booking ID is:ZCA- ".$wpdb->reference . ""; //Prepare email body $msg = "Reference: ZCA-" . $reference . "\nType:" . $type . "\nFrom:" . $from . "\nTo:" . $to . "\nDate" . $date . "\nTime:" . $time . "\nName:" . $name . "\nNumber:" . $tel . "\nEmail:" . $email . "\nPassengers:" . $passenger . "\nOther:" . $other; mail("taxi@zcarsglobal.com","Booking",$msg); mail($email,"Zcars Global Booking","Thank you for your enquiry. We aim to deal with your request straight away." . $msg); } die(); } add_action('wp_ajax_make_booking', 'makeBooking'); add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // not really needed

Ich füge das HTML-Formular ein, da ich immer noch den Fehler 404 erhalte, vielleicht ist es hier etwas?

 
<input name="date" id="date" type="date" class="form-control" required min="">

Passengers

Solutions Collecting From Web of "Benutzerdefinierte Form mit Ajax"

Ihr Versuch, Ihre AJAX-Anfragen an wp-admin / admin-ajax.php zu senden, ist korrekt, aber es ist besser, eine globale javascript-Variable zu erstellen, indem Sie wp_localize_script () verwenden , um Ihrem Skript in functions.php alle Daten zur Verfügung zu stellen bekomme nur von der Serverseite von WordPress.

Zum Beispiel kann sich Ihr JavaScript-Code im selben Ordner wie die functions.php befinden:

[Themenordner]

-> functionen.php

-> js [Ordner] -> makebooking.js

Deine jquery in makebooking.js sollte folgendermaßen aussehen:

 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: MBAjax.BookingForm, success: function(data) { jQuery("#feedback").html(data); } }); return false; } }); 

Fügen Sie bei makeBooking () , das die Daten verarbeitet, oben Ihre functions.php hinzu:

 // embed the javascript file that makes the AJAX request wp_enqueue_script( 'make-booking-ajax','js/makebooking.js', array( 'jquery' ) ); // declare the URL to the file that handles the AJAX request (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'); 

Für mehr Referenz, casting Sie einen Blick auf 5 Tipps für die Verwendung von Ajax in WordPress

Sie können Ajax nicht in WordPress auf diese Weise verwenden. Es gibt viele Tutorial über die Verwendung von Ajax auf WordPress. Ich denke, die einfachste ist http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/