<?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?
