Xmlhttp.open GET method not returning data

I’m trying to use the following code (“time_summary”) to send parameters to another php page (“time_summary_update”) which should run a query based on those parameters and return the data in a table. I know the other php file that runs the query works because I can manually browse to the page and see the correct results, but I want the results returned to the calling page to be displayed on the calling page. Right now the result just shows the correct parameters in the URL, but doesn’t return the data. Sorry for the formatting, but can you see a problem with the code?

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="script/functions.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script>
		function showDetails(d1, d2) {
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else {
				// code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("divSummary").innerHTML = xmlhttp.responseText;
				}
			};
			xmlhttp.open("GET","time_summary_update.php?d1="+d1+"&d2="+d2+,true);
			xmlhttp.send();
		}
	</script>
</head>
<body>
<form name='frmSummary' id='frmSummary' method='' action=''>
	<div align='center' id='dates'>Enter a Date Range:<br><br>
		From:<input type='date' id='from_date' name='from_date' class='row3'>&nbsp;&nbsp;&nbsp;
		To:<input type='date' id='to_date' name='to_date' class='row3'>
	</div><br>
		<div id='divSummary'>
</div><br>
<table align='center' cellpadding='0' cellspacing='0' border='0' width='1002'>
	<tr><td width='1000' height='50' align='center' valign='bottom'>
                       <input type='submit' id='submit' name='btnSummary' class='submit' 
                                   onClick = 'showDetails(<script>document.getElementById("from_date").value;</script>, 
                                   <script>document.getElementById("to_date").value;</script>)' />
               </td></tr>
        </table>
</form>
</body>
</html>

Why not use JQuery for the ajax calls?

Do you know if the page is even being called?

You need to use the developer console in your browser. The last + in this line is extra and is causing a syntax error -

xmlhttp.open("GET","time_summary_update.php?d1="+d1+"&d2="+d2+,true);

Next, the script tags and semi-colons in the onclick statement are preventing that line from being seen as code (didn’t produce console errors though.)

Lastly, you need to prevent the submit button from submitting the form, by returning false from the onclick event. See the following for the onclick statement -

onClick = 'showDetails(document.getElementById("from_date").value,document.getElementById("to_date").value); return false;'

Thank you! Fixed the typo and used your onClick code and it works now. Can’t tell you how much it means to get help from people that don’t make you feel like an idiot. On a related note, astonecipher brings up a good point about whether or not the page is even getting called. In the future, how might I go about troubleshooting a call like this to verify that the second php page is even getting called?

I do logging on everything while debugging. It is up to you on how much detail you want to log based on what you are trying to figure out.

https://www.w3schools.com/php/func_filesystem_file_put_contents.asp

I even use different file names to isolate the data I want to see to a specific process.

Sponsor our Newsletter | Privacy Policy | Terms of Service