ASK-jQuery Datepicker-在文本输入中保留所选日期

Question

I made a page which in html, php and jquery. My php script will load all data where date is equals with date selected in text input which using JQuery datepicker.

My problem is when I selected a date in datepicker and then the page will load the data, the text input at datepicker being blank (no text or date).

so how to keep the selected date in the text input?

  <link rel="stylesheet" href="/resources/demos/style.css">

$(function() {
    $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
});

$(document).ready(function() {
    $('#datepicker').change(function() {
        $('#calendar').submit();
    });
});

I need some advices to fix this. So thank you for your help. And also I want to apologize if my topic is alike with another.

Thanks for your help.

Here is my code script

<center>
<form id="calendar" action="<?php echo $_SERVER['PHP_SELF'];?>" method="GET">
<div id="datepicker_start"></div>
<input type="hidden" id="datepicker" name="datepicker">
</form>
</center> 



<?php
$host = "localhost";
$dbname = "dbname";
$username = "root";
$password = "";
try {
 $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
 $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $pe) {
 die("Could not connect to the database $dbname :" . $pe->getMessage());
}

if(isset($_GET["datepicker"])){
$datepicker = $_GET["datepicker"];
$datepicker2 = date('d-m-Y', strtotime($datepicker));
}else{
$datepicker = date('Y-m-d');
$datepicker2 = date('d-m-Y', strtotime($datepicker));
} 
 $stmt = $conn->prepare("my query");
 $stmt->bindParam(':date', $datepicker);
 $stmt->execute();

 $result = $stmt->fetchall();

 if (empty($result)) {
     echo "<center><h3>.:: Schedule <i>". $datepicker2 ." ::.</i></h1></center>";
     echo "<center><h1>.::No Data::.</h1></center>";
 }else{ 
     echo "<center><h3>.:: Schedule <i>". $datepicker2 ." ::.</i></h1></center>";
     echo 
    "<table>
    <tr>
    <th>Data 1</th>
    <th>Data 2</th>
    <th>Data 3</th>
    <th>Data 4</th>
    <th>Data 5</th>
    <th>Data 6</th>
    <th>Data 7</th>
    <th>Data 8</th>
    <th>Data 9</th>

    </tr>"
    ;

    foreach($result as $row)
    {
  echo "<tr>";
  echo "<td>" . $row['data 1'] . "</td>";
  echo "<td>" . $row['data 2'] . "</td>";
  echo "<td>" . $row['data 3'] . "</td>";
  echo "<td>" . $row['data 4'] . "</td>";
  echo "<td>" . $row['data 5'] . "</td>";  
  echo "<td>" . $row['data 6'] . "</td>";
  echo "<td>" . $row['data 7'] . "</td>";
  echo "<td>" . $row['data 8'] . "</td>";
  echo "<td>" . $row['data 9'] . "</td>";

}

  echo "</tr>";
  echo "</table>";
}
?>

Answer 1

Form Submit reloads The Page. So you should send the Date from server script on form submit and set it on the input field. or you can use ajax