jQuery.datepicker + Form validation
Hi all
I have a simplified version of the form I’m working with here.
http://www.ttmt.org.uk/forum/dateForm/
The form uses a jQuery datepicker plugin - http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
Everything was working fine until I tried to pass the form values to a php script using another jQuery script that I wrote.
In the code here I have the jQuery to post the values commented out so the datepicker works. If I have the JQuery post function uncommented the datepicker doesn’t appear.
Can anyone see what I doing wrong here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jQuery1.4.3.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/jquery.datePicker.js"></script>
<script type="text/javascript">
$(function(){
$('.date-pick').datePicker();
/*
$('#book_submit').submit(function(){
var booknameVal = $('#bookname').val();
var bookemailVal = $('#bookemail').val();
var bookphoneVal = $('#bookphone').val();
var bookdateVal = $('#date1').val();
//
$.post("book.php"),{
name: booknameVal,
email: bookemailVal,
phone: bookphoneVal,
date: bookdateVal }, function(data){ $('book_status p').html(data);
if(data.indexOf('Thank You')==0){document.forms[0].reset();}
});
return false;
})
*/
});
</script>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
form{
margin:30px;
width:20em;
}
form fieldset{
border:0;
}
form label,
form input,
form select{
float:left;
}
form label{
width:100%;
}
form input,
form textarea{
background:#eee;
width:100%;
border-width:0;
padding:.35em .2em;
margin-bottom:8px;
font-size:1em;
border:1px solid #ddd;
}
form input:focus,
form textarea:focus,
form input:hover,
form textarea:hover{
background:#e1dfdf;
}
form select{
margin-bottom:20px;
}
form #send{
width:80px;
margin-top:25px;
padding-top:7px;
clear:both;
background:gold;
}
</style>
<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
</head>
<body>
<form id="book_submit" method="post" action="">
<fieldset>
<label for="name">Name</label>
<input type="text" id="bookname" >
<label for="email">Email</label>
<input type="text" id="bookemail" >
<label for="date">Date</label>
<input name="date1" id="date1" class="date-pick">
<input type="submit" value="SEND" id="send" />
</fieldset>
</form>
</body>
</html>