mysql query data not correctly being passed to javascript from php via ajax
Question
i am trying to create a website that allows the user to enter an address into an html form. when the user hits the submit button, i want php to get the form data and then use that data to access a mysql database that stores addresses, based on the form data the php will query the mysql database and return the addresses within a given distance. then i want to use ajax to pass that result into javascript where i will use the data to create a google map with all the addresses plotted onto the map. the problem i am having right now is simply displaying the data to the console in javascript. i've noticed that every time i hit the submit button it seems as though the html page is being refreshed, so i'm thinking it is possible that the refresh is the cause of the data not being properly passed.
HTML Form code (with javascript / ajax)
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class = "container">
<nav class = "navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" href = "home.html">YardSaleMapper.com</a>
</div>
<ul class = "nav navbar-nav">
<li><a href = "home.html">Go Home</a></li>
<li class = "active"><a href = "viewSales.php">View Sales</a></li>
<li><a href = "addSale.html">Publish your Sale</a></li>
</ul>
</div>
</nav>
<h3>Enter Starting Point</h3>
<hr/>
<form method = "post" id = "myForm">
<div class = "col-md-2">
<div class = "form-group">
Street:
<input class = "form-control" type = "text" name = "start_street" ng-model = "ss" required/>
</div>
</div>
<div class = "col-md-2">
<div class = "form-group">
City:
<input class = "form-control" type = "text" name = "start_city" ng-model = "ss" required/>
</div>
</div>
<div class = "col-md-2">
<div class = "form-group">
State (EX: PA):
<input class = "form-control" type = "text" name = "start_state" ng-model = "ss" maxlength="2" required/>
</div>
</div>
<div class = "col-md-2">
<div class = "form-group">
ZIP
<input class = "form-control" type = "text" name = "start_zip" ng-model = "ss" maxlength="5" required/>
</div>
</div>
<div class = "col-md-2">
<div class = "form-group">
Within <select type = "text" name = "distance" required class = "form-control">
<option value = 5>5</option>
<option value = 10>10</option>
<option value = 15>15</option>
<option value = 20>20</option>
<option value = 25>25</option>
</select>
Miles
</div>
</div>
<div class = "col-md-2">
<div class = "form-group">
 
<button class ="btn btn-primary btn-block" id = "submit" type = "submit" name = "submit">Submit</button>
</div>
</div>
</form>
</div>
<script id = "source" language = "javascript" type = "text/javascript">
$(function() {
$('#submit').on('click', function() {
$.ajax({
url: 'getSales.php',
method: 'post',
data: $("#myForm").serialize(),
dataType: 'json',
success: function(data) {
console.log(data);
}
})
})
});
</script>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
PHP Code accessing mysql database and echoing the results.
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "yardsales";
$data = array();
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$street = $_POST["start_street"];
$city = $_POST["start_city"];
$state = $_POST["start_state"];
$zip = $_POST["start_zip"];
$dist = $_POST["distance"];
$address = $street . ", " . $city . ", " . $state . ", " . $zip;
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($address).'&sensor=false');
// Convert the JSON to an array
$geo = json_decode($geo, true);
if ($geo['status'] == 'OK') {
// Get Lat & Long
$lat = $geo['results'][0]['geometry']['location']['lat'];
$long = $geo['results'][0]['geometry']['location']['lng'];
}
$sql = "SELECT street, city, state, zip, county, sdate, edate,
stime, etime, description, 69 * vincenty($lat, $long, lat, lon) AS distance from
addresses where 69 * vincenty($lat, $long, lat, lon) < $dist";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()) {
$data[] = $row;
//print_r($row);
}
echo json_encode($data);
?>
1 answers
solution1
0 2017-04-16 23:13:28
Your submit button is making a post request and refresh the page, so the Javascript loses its data. You have to change this:
<form method = "post" id = "myForm">
or the button to another tag, like
<a></a>.
And use PDO instead of mysqli. Will be better for you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.