`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">×</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');
}
?>