Getting Data Items from MySQL database using AJAX, PHP and JSON - php

Question

I'm stuck getting my AJAX/PHP to work. I'd really appreciate it if someone can help me to spot the error(s) I'm making.
Here's an extract from my first file which successfully populates the select in the HTML:
<?php
include 'connect_db.php';
//get all period types data
$sql = "SELECT * FROM periodtypes ORDER BY period_type_id";
$result = mysqli_query($connect,$sql);
$rowCount = mysqli_num_rows($result);?>
The HTML/PHP for the select:
<select id="period_type_id" name="period_type_id" onchange="getNewP();">
<option value="">Select a Period Type</option>
<?php
if($rowCount>0){
while ($row=mysqli_fetch_assoc($result)){
echo '<option value="'.$row['period_type_id'].'">'.
$row['period_type_desc'].
' </option>';
}
}else{
echo '<option value="">Period type not available</option>';
}
?>
</select>
The HTML for the inputs I wish to update using the AJAX function below:
<label>Start Date (Auto-generated):</label>
<input type="text" id="start_date" name="start_date" value = "" readonly>
<br><br>
<label>End Date (Auto-generated):</label>
<input type="text" id="end_date" name="end_date" value = "" readonly>
And the AJAX function:
function getNewP(){
var id = $("#period_type_id").val();
alert(id); //This fires ok
if (id != '')
{
$.ajax({
url: "get_period_nbrs.php",
method:"POST",
data: { id : id },
dataType: "JSON",
success: function(output)
{
$('#start_date').text(output.start_date);
$('#end_date').text(output.end_date);
}
});
}else
{
alert("Please select a Period Type");
}
}
Finally, the main PHP script:
<?php
include 'connect_db.php';
if (isset($_POST['id']) && !empty($_POST['id'])){
//echo $_POST[id];
$sql = "SELECT SUBSTRING(MAX(period_nbr),5,2)+1 AS nxt_sfx,
MAX(start_date)+ 1 as start_date, MAX(end_date)+1 AS end_date
FROM periods AS p
INNER JOIN periodtypes AS pt on pt.period_type_id = p.period_type_id
WHERE p.period_type_id = '".$_POST['id']."'";
$result = mysqli_query($connect,$sql);
while($row=mysqli_fetch_array($result)){
if($result == true){
$start_date = $row['start_date'];
$end_date = $row['end_date'];
$period_nbr_nxt_sfx = $row['nxt_sfx'];
if ($period_nbr_nxt_sfx < 52 && $period_nbr_nxt_sfx != NULL){
$output['start_date'] = $row['start_date'];
$output['end_date'] = $row['end_date'];
echo json_encode($output);
}
}
}
}
?>

Answer 1

You're not using the right method to fill your inputs :
$('#start_date').text(output.start_date);
$('#end_date').text(output.end_date);
Should be :
$('#start_date').val(output.start_date);
$('#end_date').val(output.end_date);

Answer 2

JSON needs a root key, try this:
print_r( "{\"data\": ".json_encode($output)."}" );
instead of
echo json_encode($output);