`my modal form is not working and not redirected to mailbox.

my html code

<html><body>

<div id="myModal_pickup" class="modal fade" role="dialog">

<div class="modal-dialog">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>

<h2 class="modal-title">Schedule Pickup</h2>

</div>

<div class="modal-body">

<p id="error_message_pickup"></p>

<form id="regiration_form" class="schedule_pickup_form" action="booking_contactform.php">

<fieldset>

<div class="form-group">

<input type="text" class="form-control" name="pickname" id="PickName" placeholder="Name">

</div>

<div class="form-group">

<textarea class="form-control" name="pickaddress" placeholder="Pickup Address" id="PickAddress"></textarea>

</div>

<div class="form-group">

<input type="tel" class="form-control" id="PickNumber" name="picknumber" placeholder="Contact Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

</div>

<div class="form-group">

<input type="email" class="form-control" id="PickEmail" name="pickemail" placeholder="Email">

</div>

<input type="button" name="next" class="next btn pickup_btn" value="Next">

</fieldset>

<fieldset>

<div class="form-group">

<input type="date" class="form-control" name="pickdate" id="PickDate" placeholder="">

</div>

<div class="form-group">

<label for="lName">Time Slot</label><br>

<input type="radio" name="picktimeslot" id="pick1" value="10:00am - 1:00 pm" checked> 10:00am - 1:00 pm

<input type="radio" name="picktimeslot" id="pick2" value="1:00pm - 4:00pm"> 1:00pm - 4:00pm

<input type="radio" name="picktimeslot" id="pick3" value="4:00pm - 7:00pm"> 4:00pm - 7:00pm

</div>

<input type="button" name="previous" class="previous btn btn-default " value="Previous">

<input type="submit" name="submit_book" class="submit btn pickup_btn" value="Submit" onclick="validateSchedulePickup()" id="submit_data">

</fieldset>

</form>

</body></html>

my modal css

<style>

#myModal_pickup .modal-body{

text-align:left;

padding:10px 30px 40px 30px;

}

.previous{

background-color: transparent;

border: 2px solid #c5a759;

color: #c5a759;

font-size:14px;

font-family: 'd-din_expregular';

border-radius:0px;

padding:4px 15px;

transition: all 0.3s ease-in-out;

}

.previous:hover{

background-color:#c5a759;

border:2px solid #c5a759;

color:#fff;

}

.previous:focus{

outline:none;

}

.pickup_btn{

transition: all 0.3s ease-in-out;

background-color:#c5a759;

border:2px solid #c5a759;

color:#fff;

font-size:14px;

border-radius:0px;

padding:4px 15px;

font-family: 'd-din_expregular';

}

.pickup_btn:hover{

background-color: transparent;

border: 2px solid #c5a759;

color: #c5a759;

}

.pickup_btn:focus{

outline:none;

}

.error{color: #f00;}

</style>

my javascript

<script>

function validateSchedulePickup() {

event.preventDefault();

var pickname = $("#PickName").val();

var pickaddress = $("#PickAddress").val();

var pickemail = $("#PickEmail").val();

var pickdate = $("#PickDate").val();

var picknumber = $("#PickNumber").val();

var picktimeslot = $("input[name='picktimeslot']:checked").val();

$(".error").remove();

if (pickname.length < 2) {

$('#PickName').after('<span class="error">Name is required</span>');

}

if (pickaddress.length < 10) {

$('#PickAddress').after('<span class="error">Address is required</span>');

}

if (pickdate.length < 1) {

$('#PickDate').after('<span class="error">Date is required</span>');

}

if (picknumber.length < 1) {

$('#PickNumber').after('<span class="error">Phone number is required</span>');

} else {

var regNu = /([0-9]{10})|(\([0-9]{3}\)\s+[0-9]{3}\-[0-9]{4})/;

var validNumber = regNu.test(picknumber);

if (!validNumber) {

$('#PickNumber').after('<span class="error">Enter a valid Number</span>');

}

}

if (pickemail.length < 1) {

$('#Pickemail').after('<span class="error">Email is required</span>');

} else {

var regEx = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;

var validEmail = regEx.test(pickemail);

if (!validEmail) {

$('#Pickemail').after('<span class="error">Enter a valid email</span>');

}

}

if(pickname == '' || pickaddress == '' || pickemail == '' || picknumber == '' || pickdate == '' || picktimeslot == '')

{

$('#error_message_pickup').html("<span class='error'>All Detail is required</span>");

}

else

{

$.ajax({

url:"booking_contactform.php",

method:"POST",

data:{pickname:pickname, pickaddress:pickaddress, picknumber:picknumber, pickemail:pickemail, pickdate:pickdate, picktimeslot:picktimeslot},

success:function(data){

$('#error_message_pickup').html("Thank you! for pickup request");

$("form").trigger("reset");

}

});

event.preventDefault();

}

return false;

</script>

here is my php code

<?php

if(isset($_POST['submit_book'])){`your text`

$to = "[email protected]"; // this is your Email address

$from = $_POST['email']; // this is the sender's Email address

$pickname = $_POST['pickname'];

$pickaddress = $_POST['pickaddress'];

$picknumber = $_POST['picknumber'];

$pickemail = $_POST['pickemail'];

$pickdate = $_POST['pickdate'];

$picktimeslot = $_POST['picktimeslot'];

$book_subject = "Booking submission";

// $message = " Name : ".$name."\n\n"." Email : ".$email."\n\n"." Phone : ".$phone."\n\n"." Message : ".$contet." wrote the following: "."\n\n".$_POST['message'];

$message = $pickname."\n\n".$pickaddress."\n\n".$picknumber."\n\n".$pickemail."\n\n".$pickdate."\n\n".$picktimeslot."\n\n". $_POST['message'];

$headers = "From:" . $from;

mail($to,$book_subject,$message,$headers);

header('Location: index.php');

}

?>