In this tutorial I will show you how to get data from MYSQL table between two dates without page refresh in php using jquery Ajax in your web application.
When you work with jquery in your application, so at first you need to connect jquery.min.js file in your application. Next crate a form or create two input date field and a button, where you click data pass in the php page and get value from database between two date, which you give in input field. Now return the selected value for show data in a table.
In your application create a table and give a table id for data view using jquery. I will provide you example and source codes that are use in your application. So Follow the example and source code:
HTML Page:
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <input type="date" name="first_date" id="first_date"> <input type="date" name="second_date" id="second_date"> <input type="button" name="get_data" id="get_data" value="Get Data"> <table class="table"> <thead> <tr> <th>User Name</th> <th>User Id</th> <th>User Address</th> </tr> </thead> <tbody id="userdata"> </tbody> </table> </body> </html>
Script:
<script type="text/javascript"> $(document).ready(function(){ $("#get_data").click(function(){ var first_date=$("#first_date").val(); var second_date=$("#second_date").val(); $.ajax({ type:'post', url:'get_data.php', data:{first_date:first_date,second_date,second_date}, success:function(data){ $("#userdata").html(data); console.log(data); } }); }); }); </script>
PHP Page:
<?php $con=mysqli_connect("localhost","root","","yesuus_attendance"); $first_date=$_POST["first_date"]; $second_date=$_POST["second_date"]; $sql=mysqli_query($con,"SELECT * FROM `user_details` WHERE `date` BETWEEN '".$first_date."' AND '".$second_date."' "); $view=""; while($row=mysqli_fetch_array($sql)){ $view = $view ."<tr>"; $view=$view."<td>".$row[1]."</td>"; $view=$view."<td>".$row[2]."</td>"; $view=$view."<td>".$row[3]."</td>"; $view=$view."</tr>"; } echo $view; ?>
Related posts