retrieving data from database using ajax and jquery

Question

I want to retrieve the datas from db in accordance with the range of calender using ajax and jquery. I cant able to pass the id to calender.php. ie d1 and d2 from the calender.

<form action="" method="post" class="getcalender" id="form1">
From : <input type="text" name="d1" id="d1" class="tcal"/>
 To: <input type="text" name="d2" id="d2" class="tcal" /> 
<input type="submit" value="Search" class="tcal" id="submit" />
</form>
<div id="data_result" border="1" cellpadding="2" cellspacing="0" class="table table-striped table-bordered bootstrap-datatable datatable">
</div>
 $('#submit').click(function(){
 $.ajax({
 url:"getcalender.php",
 type:'POST',
 dataType: 'json',
 success: function(output_string){
 $("#data_result").html(output_string);
 } 
 }); 
});

my calendar.php is here.here d1(date1) and (date2) d2 values is not getting.

<?php
 $d1 = $_POST["d1"];
 $d2 =$_POST["d2"];
 $sql ="select a.`id` 'User ID', a.`username` 'Name of User', MAX(b.login_timestamp) 'Last Logged in date',count(*) 'Total No. of logins',count(*)/7 'Avg no. of Logins /day' from users a left join `client_access_log` b on b.unique_id=a.unique_id where `login_timestamp` BETWEEN '{$d1}' and '{$d2}' GROUP BY a.`id`";
 $query = mysql_query($sql) or die(mysql_error());
 if(!$query)
{
 mysql_close();
 echo json_encode("There was an error running the query: " . mysql_error());
}
elseif(mysql_num_rows($query)==0)
{
 mysql_close();
 echo json_encode("No Login");
 exit;
}
else
{
 $header = false;
 $output_string = "";
 $output_string .= "<table border='1'>\n"; 
 while($row = mysql_fetch_assoc($query))
 {
 if(!$header)
 {
 $output_string .= "<tr>\n";
 foreach($row as $header => $value)
 {
 $output_string .= "<th>{$header}</th>\n";
 }
 $output_string .= "</tr>\n";
 }
 $output_string .= "<tr>\n";
 foreach($row as $value)
 {
 $output_string .= "<th>{$value}</th>\n";
 }
 $output_string .= "</tr>\n";
 }
 $output_string .= "</table>\n";
}
 mysql_close();
echo json_encode($output_string);
 ?>

• prava: you can get calendar value in the ajax code as like this - $('#d1').val();

Answer 1

You are not sending values currently in ajax call. You need to pass values using data attribute of ajax like this:

$.ajax({
 url:"getcalender.php",
 type:'POST',
 data: {
 d1:$('#d1').val(),
 d2:$('#d2').val()
 }
 dataType: 'json',
 success: function(output_string){
 $("#data_result").html(output_string);
 } 
 }); 

Answer 2

You can try this method :-

$('#submit').click(function(){
var postData = $(this).serializeArray();//get you form data in a variable
$.ajax({
 url:"getcalender.php",
 date : postData 
 type:'POST',
 dataType: 'json',
 success: function(output_string){
 $("#data_result").html(output_string);
 } 
 }); 
});

Check below lilnk http://developerhints.com/ajax-form-submit-example/

Answer 3

You can pass the id through the query string. Inside your php you will retrieve the value and use it as you wish.

use $_SERVER['QUERY_STRING'] to get query values.

your url should looks like this: getcalender.php?d1=value1&d2=value2

The function parse_str automatically transforms all query parameters into corresponding PHP variables. For example from the following URL:

getcalender.php?d1=1&d2=2

this code:

parse_str($_SERVER['QUERY_STRING']);

will automatically create variables $d1 and $d2 with values 1 and 2 which you can then use in your code.