ASK - jquery datepicker - keep selected date in text input

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

Can you add this code in jsFiddle whit the proper php linking. So that I can check what is the data sent over there when date is selected and what is being sent as response. — Indranil Mondal
– Indranil Mondal, Commented Jun 4, 2015 at 11:54
You'd need to store the value either in a cookie/localStorage or append it as a query string, read on page load and set it to the input field. — lshettyl
– lshettyl, Commented Jun 4, 2015 at 11:54
Or if your form method is post, then you may do: $_POST["InputFieldName"] — lshettyl
– lshettyl, Commented Jun 4, 2015 at 12:28
Hi everyone, actually I'd changed the datepicker to be shown always, not using a text input. But I'm still curious to know how to keep the selected date. my form used GET method. Is that matter? And also actually I made the script in one file (css, php, jquery, html ) so I got confused to use jsFiddle. I'm so sorry. If it permitted, I'll post my script (with bad coding style).... — user3725360
– user3725360, Commented Jun 5, 2015 at 7:11

yash_arora · Accepted Answer · 2015-06-04 12:14:06Z

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

answered Jun 4, 2015 at 12:14

yash_arora

92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3725360 Over a year ago

Thanks Yash for you advice. I will try it.

Collectives™ on Stack Overflow

ASK - jquery datepicker - keep selected date in text input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related