How to Use Ajax in WordPress Booking Request Example

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= 'info@codentricks.com';
// 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();
}