I am using jQuery datepicker to filter the search results from database. There is a search form in index page (same form is also in search.php) and it directs the user to search.php page after inserting the inputs and displaying the data table in search.php page. Datepicker works fine under normal conditions but when I sumbit the form empty in index.php datepicker is not triggered in search.php.
This is the form in index.php
<section id="searchForm">
<div class="container">
<h1>Search</h1>
<h3>See Proc</h3>
<form id="form" align="center" action="search.php" method="GET">
<input class="search_input" type="text" name="from" placeholder="From...">
<input class="search_input" type="text" name="where" placeholder="Where...">
<input class="search_input" type="text" id="datepicker" name="date" placeholder="Date...">
<select id="select" name="type">
<option value="package">Package</option>
<option value="paper">Paper</option>
</select>
<input class="btn btn-secondary" name="search_btn" type="submit" value="Search">
</form>
</div>
</section>
<script>
$(document).ready(function() {
$('#datepicker').datepicker({
});
});
</script>
This is the section from search.php
<section id="searchTools">
<div class="container">
<form id="form" align="center" action="search.php" method="GET">
<input class="search_input" type="text" name="from" placeholder="From...">
<input class="search_input" type="text" name="where" placeholder="Where...">
<input class="search_input" type="text" id="datepicker" name="date" placeholder="Date...">
<select class="search_input" name="type">
<option value="package">Package</option>
<option value="paper">Paper</option>
</select>
<input class="submit_button" name="search_btn" type="submit" value="Search">
</form>
</div>
</section>
<section id="results">
<div class="container">
<table clas="table table-hover">
<tr>
<th>Name Surname</th>
<th>Where</th>
<th>From</th>
<th>Date</th>
<th>Price</th>
<th>Type</th>
</tr>
<?php
include_once "db_connect.php";
$from = $_GET['from'];
$where = $_GET['where'];
$date = $_GET['date'];
$type = $_GET['type'];
$proc_id = $_GET['proc_id'];
$procDate = DateTime::createFromFormat('m/d/Y', $date);
$procDate = $procDate->format('Y-m-d');
//define how many results you want per page
$results_per_page = 8;
//number of results stored in database
"SELECT * FROM proc WHERE p_from = '".$from."' and p_where = '".$where."' and type= '".$type."' ";
$query = mysqli_query($conn, $sql);
$num_rows = mysqli_num_rows($query);
//determine number of total pages available
$num_of_pages = ceil($num_rows/$results_per_page);
//determine which page number visitor is currently on
if (!isset($_GET['page'])) {
$page = 1;
header("search.php?page=1");
}else{
$page = $_GET['page'];
}
//determine the SQL LIMIT starting number for the result on the displaying page
$page_first_result = ($page - 1)*$results_per_page;
//retrive selected results from database and display them on page
$sql = "SELECT * FROM proc WHERE p_from = '".$from."' and p_where = '".$where."' and type= '".$type."' and p_date >= '".$procDate."' ORDER BY p_date, price LIMIT " . $page_first_result . " , " . $results_per_page . "";
$query = mysqli_query($conn, $sql);
while ($rows = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
echo '<tr onclick="content(\''. $rows['proc_id'] .'\')">';
echo "<td>" .$rows['p_name'] . " " . $rows['p_surname']. " </td>";
echo "<td>" .$rows['p_from']. "</td>";
echo "<td>" .$rows['p_where']. "</td>";
echo "<td>" .$rows['p_date']. "</td>";
echo "<td>" .$rows['price']. "</td>";
echo "<td>" .$rows['type']. "</td>";
echo "</tr>";
}
//display the links to the pages
for ($page=1; $page <= $num_of_pages; $page++) {
echo '<a href="search.php?page=' .$page.' &from='.$from.' &where='.$where.' &date='.$date.' &type='.$type.' ">' . $page . '</a> ';
}
?>
</table>
</div>
</section>
<script>
function content(ID){
window.open('procdetail.php?proc_id=' + ID, '_blank');
}
$(document).ready(function () {
$( "#datepicker" ).datepicker();
});
</script>)