Here is my code.
<html>
<head>
<title>Patient Information Management</title>
<!--showDate AJAX script -->
<script language="javascript" type="text/javascript">
function showDate(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.value = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var date = document.getElementByName('Date').value;
var queryString = "?date=" +date ;
ajaxRequest.open("GET", "getappointmentdate.php" +queryString, true);
ajaxRequest.send(null);
}
</script>
<!-- //Calender Script -->
<link rel="stylesheet" type="text/css" media="all" href="scripts/jsDatePick_ltr.min.css"/>
<!--JavaScript-->
<script type="text/javascript" src="scripts/jsDatePick.min.1.3.js"></script>
<!--For javascript Calendar-->
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"Date",
cellColorScheme:"orange",
dateFormat:"%d-%m-%Y",
});
};
</script>
</head>
<body>
<div class="wrapper">
<?php include("include/header.php"); ?>
<div class="clear"></div>
<?php
<div class="clear"></div>
</div> <!-- end of sidemenu div -->
</div> <!-- end of left div -->
<div id="right" >
<h2>anything</h2>
<div class='grey_divider'></div>
<p> </p>
<div class='grey_divider'></div>
<h3>Make Appointment</h3>
<form action="">
Date : <input type="text" size="20" id="Date" name="Date"/>
<input type='button' onclick='showDate()' value='Submit'/>
</br>
</br>
</form>
</div>
</body>
</div>
</html>
When I click button 'Submit' , it should be run the php document, but unfortunately, nothing happen, someone can help me please. I catch html date with getElementByName instead of getElementById because the 'id' has been use to catch the calender js .Would it affect?
I'm pretty sure you need to catch the button click and stop it's default behaviour with .preventDefault() and then call your function.
Added code
$('input[type="submit"]').click(function(e) {
e.preventDefault();
showDate();
});