Hi,

I'm designing a web page that has 6 drop down html form inputs (d, m, y, d, m, y) for pulling records from a mysql database depending on users input of a range of dates. I'm trying to use an Ajax script that will hopefully, on submit of form, show the selected records below the html form without refreshing the page, this works great apart from the fact that it is formatting the date submitted wrongly and php/mysql isnt liking it. I know the php date formatting is right because if i submit the form directly to the PHP page with any ajax, the dates are right and it does select records between the two inputted dates!

Does anyone know why it would do this or how to correct it so i can use the ajax to show the records without a page refresh?

AJAX FILE (relevant ajax code is the first function that goes to dates.php)

// AJAX REQUEST
function httpRequest(){
   var httpRequest = null;
   try { httpRequest = new XMLHttpRequest(); }
   catch(e){
      try{httpRequest = new ActiveXObject("Msxml2.XMLHTTP");}
      catch(e){httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}
   }
   return httpRequest;
}

var t;
function ajaxFunction(){
   var http_request = httpRequest();
   var dateresult = document.getElementById('dateresult');
   var url = "dates.php";
   http_request.open("POST", url, true);
   http_request.onreadystatechange = function(){
      if(http_request.readyState == 4){
         dateresult.innerHTML = http_request.responseText;
      }
   }
   http_request.send(null);
   t = setTimeout(ajaxFunction, 1000);
}
function load_data1(){
   var http_request = httpRequest();
   var object_area1 = document.getElementById('tablecontainer1');
   var url = "ajaxphp.php";
   http_request.open("POST", url, true);
   http_request.onreadystatechange = function(){
      if(http_request.readyState == 4){
         object_area1.innerHTML = http_request.responseText;
      }
   }
   http_request.send(null);
   t = setTimeout(load_data1, 1000);
}
document.onLoad = load_data1();

PHP FILE

<?php

   $dbhost = "localhost";
   $dbuser = "root";
   $dbpass = "";
   $dbname = "test";
   
   $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die("Cannot connect to mysql server");
   mysql_select_db($dbname) or die("Cannot select database");
   
   if($conn){
$datef = (date("Y-m-d",mktime(0, 0, 0, $_POST['month'], $_POST['day'], $_POST['year'])));
$datel = (date("Y-m-d",mktime(0, 0, 0, $_POST['month1'], $_POST['day1'], $_POST['year1'])));
echo $datef;
echo $datel;
$result = mysql_query("SELECT * FROM mashwash1 WHERE t_stamp BETWEEN '".$datef."' AND '".$datel."'");

      echo "<table>
<tr>
<th>F18:0</a></th>
<th>Timestamp</a></th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['F18_0'] . "</td>";
  echo "<td>" . $row['t_stamp'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
echo "</br>";     
      
   }
?>

HTML FORM

<form method="POST" action="dates.php">
				<select name="day">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="15">15</option>
				</select>
				<select name="month">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				</select>
				<select name="year">
				<option value="2006">2006</option>
				<option value="2007">2007</option>
				<option value="2008">2008</option>
				<option value="2009">2009</option>
				<option value="2010">2010</option>
				</select>
				
				<select name="day1">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="15">15</option>
				</select>
				<select name="month1">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="6">6</option>
				</select>
				<select name="year1">
				<option value="2006">2006</option>
				<option value="2007">2007</option>
				<option value="2008">2008</option>
				<option value="2009">2009</option>
				<option value="2010">2010</option>
				</select>

				<input type="button" value="Submit"
                                onClick="ajaxFunction()" />
				</form>

				<div id="dateresult">
						
				</div>

Hey,
Could you explain this little more "formatting the date submitted wrongly" with an example, i mean only the date format that you want to get.

Yeah sorry, if i press submit with the ajaxFunction being called, then the date range i have selected in the html form input, ie. 15 04 2010 and 03 06 2010, the output below is 1999-11-30 1999-11-30 and no records have been selected from the database, however if i submit the form straight to the PHP page without any ajax then the date has been formatted correctly using the mktime you saw above and it has selected the correct records from the db. So i'm guessing that the ajax is doing something to the html form input on the way to the PHP page....or am i completely wrong!?

Hey,
It is not the Ajax is villain here.See your php code ,especially the date format u have given

#
$datef = (date("Y-m-d",mktime(0, 0, 0, $_POST['month'], $_POST['day'], $_POST['year'])));
#
$datel = (date("Y-m-d",mktime(0, 0, 0, $_POST['month1'], $_POST['day1'], $_POST['year1'])));

So whatever you input it will convert into "Y-m-d" format.
I think now you got the way to correct this.

I understand that because in my database i have a date column called 't_stamp' and the date is in the format "yyyy-mm-dd".

So when i submit the form directly to the PHP page it comes through fine, however when i add the ajax layer in between it screws the format up and comes through completely wrong!?

I'm just guessing the above code is correct because if i just go from html to php page it works fine...

Hey,

Ur column t_stamp is in format "yyyy-mm-dd". So definitely your output $row will be in that format only.If you want the date to be displayed in "dd-mm-yyyy" format again do a date conversion . Replace $row with

date("d-m-Y",mktime(0, 0, 0, $month1, $day1, $year1))

.Explode $row and find $month1, $day1 and $year1 values.


Whether this is your requirement?

I did try that before but didnt work!? I thought it might as it looks in the right order but nope!

Is it something to do with the submit button? if i change the input type to "submit" it sends the page off to the php page and works, if i change the input type to "button" it runs ajaxFunction() and doesnt work!?

Hey,
1. When you runs ajaxFunction(), what is the value you are getting for date, month and year.

2. In your js file u have mentioned dates.php and ajaxphp.php. Among this which one is posted here. And which one is the ajax php file.

If i select 15 04 2010 and 03 06 2010 from the html drop down and hit submit (which runs the ajaxFunction()) i get 30-11-199930-11-1999 and no records selected from the DB, i get these dates because as you can see i echo the variables to test what values it receives. dates.php is the php file with the date formatting and the mysql connection, ajaxphp.php is another php file which is connected to the same DB diff table for another table on my website. Do you think ajaxphp.php is getting in the way (as you can see, i'm pretty new to AJAX and PHP)

EDIT: I've just tried temporarily deleting the load_data1() function from the ajax.js because i thought it might be interfering....no difference, still wrong!

Hey,
Just echo out the values for $_POST,$_POST and $_POST.
R u gettg tis correctly?

Well i echoed the POST variables and they all come through fine, this is with me submitting directly to the php page, nothing gets echoed if i run the ajaxFunction()!!!

Hey,

I think you didnt pass any arguments in ur js file.
You have to pass the d,m,y values to js and then pass this as an argument to the url.
Use $_GET or $_REQUEST to get the values in ajax php file.

var dat = document.getElementById("selectboxId").selectedIndex;
var date = document.getElementById("selectboxId").options[des].value;
//Like this find the value for month and year	
var arg = "?date="+date+"&month="+month+"&year="+year;
var url = "dates.php"+arg;

I've tried to implement what you said, which does make sense but being new to this i found it hard to put it into practice...

var t;
function ajaxFunction(){
   var http_request = httpRequest();
   var dateresult = document.getElementById('dateresult');
   var day = document.getElementById('day').selectedIndex;
	var day = document.getElementById('day').options[des].value;
	var month = document.getElementById('month').selectedIndex;
	var month = document.getElementById('month').options[des].value;
	var year = document.getElementById('year').selectedIndex;
	var year = document.getElementById('year').options[des].value;
	var day = document.getElementById('day1').selectedIndex;
	var day = document.getElementById('day1').options[des].value;
	var month = document.getElementById('month1').selectedIndex;
	var month = document.getElementById('month1').options[des].value;
	var year = document.getElementById('year1').selectedIndex;
	var year = document.getElementById('year1').options[des].value;
		//Like this find the value for month and year	
	var arg = "?day="+day+"&month="+month+"&year="+year+"day1="+day1+"&month1="+month1+"&year1="+year1;
	var url = "dates.php"+arg;
   http_request.open("POST", url, true);
   http_request.onreadystatechange = function(){
      if(http_request.readyState == 4){
         dateresult.innerHTML = http_request.responseText;
      }
   }
   http_request.send(null);
   t = setTimeout(ajaxFunction, 1000);
<form method="GET" action="dates.php">
				<select name="day" id="day">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="15">15</option>
				</select>
				<select name="month" id="month">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				</select>
				<select name="year" id="year">
				<option value="2006">2006</option>
				<option value="2007">2007</option>
				<option value="2008">2008</option>
				<option value="2009">2009</option>
				<option value="2010">2010</option>
				</select>
				
				<select name="day1" id="day1">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="15">15</option>
				</select>
				<select name="month1" id="month1">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="6">6</option>
				</select>
				<select name="year1" id="year1">
				<option value="2006">2006</option>
				<option value="2007">2007</option>
				<option value="2008">2008</option>
				<option value="2009">2009</option>
				<option value="2010">2010</option>
				</select>

				<input type="button" value="Submit" onClick="ajaxFunction()" />
				</form>
if($conn){
$datef = (date("Y-m-d",mktime(0, 0, 0, $_GET['month'], $_GET['day'], $_GET['year'])));
$datel = (date("Y-m-d",mktime(0, 0, 0, $_GET['month1'], $_GET['day1'], $_GET['year1'])));
echo $_GET['day'];
echo $_GET['month'];
echo $_GET['year'];
echo $_GET['day1'];
echo $_GET['month1'];
echo $_GET['year1'];
echo $datef;
echo $datel;
$result = mysql_query("SELECT * FROM mashwash1 WHERE t_stamp BETWEEN '".$datef."' AND '".$datel."'");

      echo "<table>

I expect i've done it completely wrong but if you could point out my mistakes that would be great!! Thanks

EDIT: If i submit directly to the PHP using the code above, the javascript must be working because the url that is passed has all the correct values in them. But if i try the ajaxFunction() nothing appears, is there a better way to call the ajax to display the mysql records below in the div: dateresult?

Hey,
Wait see you have reused the variable day again. There is no day1.Change the second day to day1 and same 4 m and y

i dont understand, i have put ids on all the selects in the html form, so day, month, year, day1, month1, year1, so do i not need a getElement per select option?

Hey,
C inside ur ajax function

var day = document.getElementById('day').selectedIndex;
var day = document.getElementById('day').options[des].value;
var month = document.getElementById('month').selectedIndex;
var month = document.getElementById('month').options[des].value;
var year = document.getElementById('year').selectedIndex;
var year = document.getElementById('year').options[des].value;
var [B]day[/B] = document.getElementById('day1').selectedIndex; //replace day with day1
var [B]day[/B] = document.getElementById('day1').options[des].value;

C the day variable is already used ..Replace the one highlated with day1 and so on for m and y.

Whoops, yep didnt spot that!!

Still not working but the url is still passed correctly to the php page, does anything need to change in the php page to allow the ajax to display the results...?

Hey,
Check whether you have this in your html code.

<div id="dateresult"></div>

i do!

Just ran Firebug in Firefox and clicked the "Submit" button and it says "des is not defined
[Break on this error] var day = document.getElementById('day').options[des].value;"

What does this mean?

Hey,
Just replace with this

var day = document.getElementById('day').selectedIndex;
var day = document.getElementById('day').options[day].value;
var month = document.getElementById('month').selectedIndex;
var month = document.getElementById('month').options[month].value;
var year = document.getElementById('year').selectedIndex;
var year = document.getElementById('year').options[year].value;
var day = document.getElementById('day1').selectedIndex;
var day = document.getElementById('day1').options[day1].value;
var month = document.getElementById('month1').selectedIndex;
var month = document.getElementById('month1').options[month1].value;
var year = document.getElementById('year1').selectedIndex;
var year = document.getElementById('year1').options[year1].value;

des is not predefined var. The var represents

document.getElementById('d/m/y').selectedIndex

WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

It worked!

Never thought it would!

Well thanks for all your help! Excellent, thanks for being very patient and sticking with my problem!

Ha Ha ...I no we will do it!!!!!

sorry, one more quick thing, when the url is passed there is not gap between "year=2010 and day1=3" so the url passed to the php is this http://localhost/frontend/dates.php?day=15&month=4&year=2010day1=3&month1=6&year1=2010.

day 15
month 4
month1 6
year 2010day1=3
year1 2010

The parameters above are what the js is sending, so you see there is no day1 because its been included in the year. How do i put a gap or something in this js url: var arg = "?day="+day+"&month="+month+"&year="+year+"day1="+day1+"&month1="+month1+" year1="+year1;
var url = "dates.php"+arg;

Thanks

Never mind just had to stick a "&" before the day1!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.