Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

How to Use Ajax in WordPress Booking Request Example

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= '[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();
}
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments