This post is all about how to use AJAX in WordPress . In this example we will create a booking request section that will send email regarding booking using ajax.
I assumes that you already have basic knowledge of WordPress, javascript (jquery), bootstrap…. The code given below is simple to understand and already running on a wordpress website. I can’t name the website I build so please go through codes given below … I will solve queries using comment section.
How to Use Ajax in WordPress HTML Part
<section id="search"> <div class="container-fluid"> <form id="bookingForm" method="post"> <div class="row"> <div class="col-md-2"> <input type="text" name="checkin" id="bk_checkin" class="datepicker form-control" placeholder="Select Check In Date" required/> </div> <div class="col-md-2"> <input type="text" name="checkout" id="bk_checkout" class="datepicker form-control" placeholder="Select Check Out Date" required/> </div> <div class="col-md-3"> <input type="text" name="name" id="bk_name" class="form-control" placeholder="Enter Full Name" required/> </div> <div class="col-md-3"> <input type="text" name="email" id="bk_email" class="form-control" placeholder="Enter Email ID" required/> </div> <div class="col-md-2"><button type="submit" class="btn btn-info btn-block">Book</button></div> </div> <div class="col-md-12"> <div id="bookingResponse"></div> </div> </form> </div> </section>
How to Use Ajax in WordPress Javascript Part
In your theme folder create folder js and inside js folder create javascript file bookingrequest.js with code given below
jQuery(document).ready(function($) { $("#bookingForm").on("submit",function(e){ e.preventDefault(); var checkin= $("#bookingForm #bk_checkin").val(); var checkout= $("#bookingForm #bk_checkout").val(); var name= $("#bookingForm #bk_name").val(); var email= $("#bookingForm #bk_email").val(); $("#bookingForm #bookingResponse").html('<p class="text-center"><i class="fa fa-spin fa-cog fa-2x"></i></p>'); $.ajax({ url: booking_ajax_obj.ajaxurl, // or example_ajax_obj.ajaxurl if using on frontend data: { 'action': 'booking_ajax_request', 'checkin' : checkin, 'checkout' : checkout, 'name' : name, 'email' : email, }, success:function(data) { $("#bookingForm #bookingResponse").html(data) console.log(data); }, error: function(errorThrown){ console.log(errorThrown); } }); }); });
How to Use Ajax in WordPress PHP Part
Just copy the code below and paste inside functions.php
//Booking request file Register function booking_ajax_enqueue() { // 1st enqueue wp_enqueue_script( 'booking-ajax-script', get_template_directory_uri() . '/js/bookingrquest.js', array('jquery') ); // 2nd Register wp_localize_script( 'booking-ajax-script', 'booking_ajax_obj',//url in js file will be url: booking_ajax_obj.ajaxurl array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); } add_action( 'wp_enqueue_scripts', 'booking_ajax_enqueue' ); // booking function //action in javascript file will be 'action': 'booking_ajax_request' add_action( 'wp_ajax_booking_ajax_request', 'booking_ajax_request' ); add_action( 'wp_ajax_nopriv_booking_ajax_request', 'booking_ajax_request' ); function booking_ajax_request() { $to= '[email protected]'; // The $_REQUEST contains all the data sent via ajax if (isset($_REQUEST) ) { $checkin = sanitize_text_field(trim($_REQUEST['checkin'])); $checkout = sanitize_text_field(trim($_REQUEST['checkout'])); $name = sanitize_text_field(trim($_REQUEST['name'])); $email = sanitize_text_field(trim($_REQUEST['email'])); if($checkin==""){ echo '<br/><div class="alert alert-danger">Select Check in Date</div>'; }else if($checkout==""){ echo '<br/><div class="alert alert-danger">Select Check Out Date</div>'; }else if($name==""){ echo '<br/><div class="alert alert-danger">Please enter your Full Name</div>'; }else if(!filter_var($email, FILTER_VALIDATE_EMAIL) === true){ echo '<br/><div class="alert alert-danger"><b>Sorry</b> Invalid Email ID</div>'; }else{ $subject = 'Booking Request'; $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; // Create email headers $headers .= 'From: '.$email."\r\n". 'Reply-To: '.$email."\r\n" . 'X-Mailer: PHP/' . phpversion(); $msg = '<html><body><p>'; $msg .= 'Check In : '.$checkin.'<br/>'; $msg .= 'Check Out : '.$checkout.'</p>'; //$msg .= 'Full Name : '.$name.''; $msg .= '<p>From <br/>'.$name.'<br/>'.$email.'</p>'; $msg .= '</body></html>'; if(mail($to, $subject, $msg, $headers)){ echo '<br/><div class="alert alert-success">Your Booking Request sent successfully, we will contact you as soon as possible.</div>'; } else{ echo '<br/><div class="alert alert-danger"><b>Sorry </b>Mail was not sent, Please try Later</div>'; } } }else{ echo '<br/><div class="alert alert-danger">Something went Wrong ...</div>'; } die(); }