<?php
if(isset($_POST['date'])) {
$date = strtotime($_POST['date']);
$day = strtolower(date("D", $date));
}
?>
<script>
$(function() {
$( "#datepicker" ).datepicker($.extend({
constrainInput: true,
altField: ".alternate",
altFormat: "yy-mm-dd",
minDate: 0,
firstDay: 1,
onSelect:function(dateText,instance) {
$.post("index.php", { date:dateText },
function(data) {
$('#txtHint').html('');
$('#txtHint').html(data);
});
}
},
));
});
</script>
I am trying to display datepicker post data in DIV #txtHint. It works, but it posts whole page html to this div. and i only want post information to be displayed within <div id="txtHint"></div>
Here is index.php:
<?php
$today = strtotime(date("d-m-Y"));
$now = strtotime(date("H:i"));
$before = "-".$settings['close_before']." hours";
if(isset($_POST['date'])) {
$date = strtotime($_POST['date']);
$day = strtolower(date("D", $date));
// THIS HERE SHOULD BE RETURNED TO TXTHINT DIV BELOW IN FORM
echo "<select name=\"time\" class=\"form-control\" disabled>";
echo "<option value=\"\">".$day."</option>";
echo "</select>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>form</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/jquery.ui.datepicker-da.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
$(function() {
$( "#datepicker" ).datepicker($.extend({
constrainInput: true,
altField: ".alternate",
altFormat: "yy-mm-dd",
minDate: 0,
firstDay: 1,
onSelect:function(dateText,instance) {
$.post("index.php", { date:dateText },
function(data) {
var obj = $(data);
$("#txtHint").html(obj.find("didHint").html());
});
}
}
));
});
</script>
</head>
<body>
<form role="form" method="post" action="index.php">
<div class="box-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon text-bold uppercase"><i class="fa fa-calendar"></i> <small><i class="fa fa-asterisk text-red"></i></small></span>
<input id="datepicker" type="text" class="form-control date">
<input name="date" class="alternate" type="hidden">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon text-bold uppercase" style="border: none !important;"><i class="fa fa-clock-o"></i> <small><i class="fa fa-asterisk text-red"></i></small></span>
<!-- HERE IS WHERE POSTED SELECT SHOULD APPEAR -->
<div id="txtHint">
<select name="time" class="form-control" disabled>
<option value="" selected disabled>Select date first</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" name="goforit" class="btn btn-success pull-right text-bold" style="text-transform: uppercase;">submit</button>
</div>
</div>
</form>
</body>
</html>
I specifically want it to be in one page. not calling external script for post data. Anyone can suggest?
Change index.php so it exits after responding to the AJAX request, and doesn't print the full HTML file.
<?php
$today = strtotime(date("d-m-Y"));
$now = strtotime(date("H:i"));
$before = "-".$settings['close_before']." hours";
if(isset($_POST['date'])) {
$date = strtotime($_POST['date']);
$day = strtolower(date("D", $date));
// THIS HERE SHOULD BE RETURNED TO TXTHINT DIV BELOW IN FORM
echo "<select name=\"time\" class=\"form-control\" disabled>";
echo "<option value=\"\">".$day."</option>";
echo "</select>";
exit(); // <<=== Add this
}
?>