Send datepicker input in an email
Hello,
I recently embed Datepicker in one of my websites. I try to get the inputs(Date) and send them through email but when I click on my submit button the page refreshes and in address bar you can see this:
http://www.screencast.com/t/jl3Oit4vr8Zl
see the html code below:
- <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#checkin" ).datepicker();
});
$(function() {
$( "#checkout" ).datepicker();
});
</script>
- <div id="booking">
<div class="container">
<div class="row">
<div class="span2">
<input type="text" name="email" id="email" placeholder="E-mail"/>
</div>
<form class="form-inline">
<div class="span2">
<input type="text" name="checkin" id="checkin" value="Check In Date" />
</div>
<div class="span2">
<input type="text" name="checkout" id="checkout" value="Check Out Date" />
</div>
see javascript code below:
- $(document).ready(function(){
$("#submithome").click(function(){
var email = $("#email").val();
var message = $("#message").val();
var guests = $("#guests :selected").text() //the text content of the selected option
var room = $("#room :selected").text() //the text content of the selected option
var checkin = $("#checkin").val();
var checkout = $("#checkout").val();
var error = false;
//email validate
if(email.length == 0 || email.indexOf("@") == "-1" || email.indexOf(".") == "-1"){
var error = true;
$("#error_email").fadeIn(500);
}else{
$("#error_email").fadeOut(500);
}
//guests validate
if(guests == "Number of Guests"){
var error = true;
$("#error_adults").fadeIn(500);
}else{
$("#error_adults").fadeOut(500);
}
//room validate
if(room == "Room"){
var error = true;
$("#error_room").fadeIn(500);
}else{
$("#error_room").fadeOut(500);
}
//checkin validate
if(checkin.length == 0){
var error = true;
$("#error_checkin").fadeIn(500);
}else{
$("#error_checkin").fadeOut(500);
}
//checkout validate
if(checkout.length == 0){
var error = true;
$("#error_checkout").fadeIn(500);
}else{
$("#error_checkout").fadeOut(500);
}
if(error == false){
$("#submithome").attr({"disabled" : "true", "value" : "Sending..." });
$.ajax({
type: "POST",
url : "submithome.php",
data: "&email=" + email + "&subject=" + "You Got Email from Sunshine" + "&message=" + message + "\n\n" + "Guests: " + guests + "\n" + "Room: " + room + "\n" + "Checkin: " + checkin + "\n" + "Checkout: " + checkout,
success: function(data){
if(data == 'success'){
//$("#mail_success").fadeIn(500);
$("#btnsubmithome").remove();
setTimeout(function(){
window.location.reload(1);
}, 2000);
}else{
// $("#mail_failed").html(data).fadeIn(500);
$("#btnsubmithome").remove();
setTimeout(function(){
window.location.reload(1);
}, 2000);
}
}
});
}
return false;
});
});
see php code below:
- <?php
session_start();
$email_to = "nickos.moustakas@gmail.com"; // change with your email
$email = $_POST['email'];
$room = $_POST['room'];
$checkin = $_POST['checkin'];
$checkout = $_POST['checkout'];
$guests = $_POST['guests'];
$subject = $_POST['subject'];
$headers = "From: $email\r\n";
/*headers .= "Reply-To: $email\r\n";*/
if(mail($email_to, $subject, $headers, $message)){
echo "success";
}
else{
echo "failed";
}
?>
You can check the problem live at http://www.tsoklo.sunshinepension.gr/
Thanks for your valuable time. I'am newbiew in js and how about handling data.