I have a PHP file that contains a form. I want to use the $.post method from jQuery to post the form results and populate a DIV on the page with the results without a page refresh. When I press submit, what I see in the Network portion of the Chrome Dev Tools is that the specified parameters are being passed to the CURRENT page (reports.php), not the page I am specifying in the URL!
The form is on reports.php and I want to post to getSurveys.php. Here is the code for reports.php:
<?php
include("php/common.php");
?>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
$("document").ready(function () {
$("#reportform").submit(function() {
var tech = $("#tech_id").val();
var loc = $("#location").val();
var startdate = $("#startdate").val();
var enddate = $("#enddate").val();
var url = "getSurveys.php";
$("#results").html('<br><img src="ajax-loader.gif" /><br>');
$.post(
url,
{
tech: tech,
loc: loc,
startdate: startdate,
enddate: enddate
},
function (data) {
var result = data;
console.log(result);
},
"json"
);
});
});
</script>
</head>
<body>
<center>
<div id="criteria" name="criterai" width="75%">
<center>
<h2>Criteria</h2>
<form id="reportform">
<table id="criteriatable" name="criteriatable" width="75%" border="0" cellpadding="3">
<tr>
<td>
<label for="tech_id">Choose a Technician</label>
<br>
<select name="tech_id" id ="tech_id">
<?php
$q = $conn->query("SELECT *
FROM technicians");
$q->setFetchMode(PDO::FETCH_ASSOC);
while($t = $q->fetch()) {
$techs = $t['tech_id'];
echo "<option>
$techs
</option>";
}
?>
</select>
</td>
<td>
<label for="location">Choose a Location</label>
<br>
<select name="location" id ="location">
<?php
$q = $conn->query("SELECT *
FROM locations");
$q->setFetchMode(PDO::FETCH_ASSOC);
while($l = $q->fetch()) {
$locs = $l['name'];
echo "<option>
$locs
</option>";
}
?>
</select>
</td>
<td>
<h4>Choose Date Range</h4>
<br>
<label for="startdate">Start Date</label>
<br>
<input id="startdate" type=date name="startdate" >
<br>
<label for="enddate">End Date</label>
<br>
<input id="enddate" type=date name="enddate" >
</td>
</tr>
</table>
<center>
<input type="submit" id="refresh" name="refresh" value ="Refresh">
</center>
</form>
<script>
$( "#reportform" ).validate({
rules: {
startdate: {
required: true,
date: true
},
enddate: {
required: true,
date: true
}
}
});
</script>
<br>
</center>
</div>
<br>
<br>
<div id="results" name = "results" width="75%"></div>
</center>
</body>
</html>
Again, the problem is when I look at where it is posting to, it posts to reports.php?tech=vale&loc=value etc, not the getSurvey.php! What am I missing here?
Cancel the default event of the form that is causing it to submit.
<script>
$("document").ready(function () {
$("#reportform").submit(function(e) {
e.preventDefault(); //prevents form submission
//rest of function
});
});
</script>