CODEWITHSUNDEEP
phpjquery
Mindaugas Butkevicius
Mindaugas Butkevicius

Reputation: 21

jQuery post data to a div

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

Upvotes: 2

Views: 92

Answers (1)

Barmar
Barmar

Reputation: 781088

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

Upvotes: 1

Related Questions