HTML AJAX not executing PHP - php

Question

I am really new to AJAX/jQuery and PHP, and im trying to work on a little project that writes your daily weight to a Db which then is displayed later on with graphs etc.
I would like when the user submits the form for his or her weight that it displays a pop up message but for whatever reason, the AJAX/Jquery script doesn't seem to be doing anything with the php file therefore no info gets added into the database.
Here is the HTML Form: (index.html)
<form id="ajax-form" method="post" action="connection.php">
<div class="columns field">
<div class="column control is-half is-offset-one-quarter">
<input
class="input"
id="weight"
name="weight"
type="text"
placeholder="Enter your weight for the day"
/>
</div>
</div>
<div class="center-test">
<div class="field">
<div class="control">
<span class="select">
<select name="person">
<option value="Ayush">Ayush</option>
<option value="Sheri">Sheri</option>
</select>
</span>
</div>
</div>
</div>
<input type="date" name="weightdate" id="weightdate" />
<div class="field column is-half is-offset-one-quarter">
<button
type="submit"
id="submit"
name="submit"
class="button is-primary"
>
Submit
</button>
</div>
</form>
<div id="error_message" class="text-danger"></div>
<div id="success_message" class="text-success"></div>
AJAX/jQuery: (inside index.html )
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var weight = $("#weight").val();
var person = $("#person").val(); // You miss this
var weightdate = $("#weightdate").val(); // You miss this
if (weight == "" || person == "" || weightdate == "") {
$("#error_message").html("All Fields are required");
} else {
$("#error_message").html("");
$.ajax({
url: "connection.php",
method: "POST",
data: {
weight: weight,
person: person, // Add this
weightdate: weightdate, // Add this
},
success: function (data) {
$("form").trigger("reset");
$("#success_message").fadeIn().html("data");
setTimeout(function () {
$("#success_message").fadeOut("Slow");
}, 2000);
},
});
}
});
});
PHP: (connection.php)
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
include_once 'dbconnect/db_info.php';
$weight = $_POST['weight'];
$person = $_POST['person'];
$date = $_POST['weightdate'];
$formatDate = date("d/m/y", strtotime($date));
//echo $formatDate;
if(date("m", strtotime($date)) == date("01")) {
$sql = "INSERT INTO WeightTracker (person, kg, weight_date, date_month) VALUES ('$person', '$weight', '$formatDate', 'January');";
#$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
}
elseif(date("m", strtotime($date)) == date("04")) {
//echo working;
$sql = "INSERT INTO WeightTracker (person, kg, weight_date, date_month) VALUES ('$person', '$weight', '$formatDate', 'April');";
#$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
}
else {
$sql = "INSERT INTO WeightTracker (person, kg, weight_date) VALUES ('$person', '$weight', '$date');";
#$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
}
Does anyone have any ideas? When I remove the AJAX/jQuery code, the form successfully submits and the connection.php writes to the database with no issues.

Answer 1

Most of the problem was resolved in comments. The problem (as described in the comments) was a PHP error Undefined index on this line:
$person = $_POST['person'];
As I mentioned in an earlier comment: your person input is missing the expected person ID. That means this Javascript:
var person = $("#person").val();
Is actually undefined, so there is no person field POSTed to your PHP, so when you try to use it as $_POST['person'], you'll get an error.
To fix that, just add the id your Javascript is using to find the person:
<select name="person" id="person">

Answer 2

The data you give for the POST request is just weight, there is no person and weightdate data.
var weight = $("#weight").val();
var person = $("#person").val(); // You miss this
var weightdate = $("#weightdate").val(); // You miss this
if (weight == "" || person == "" || weightdate == "") {
$("#error_message").html("All Fields are required");
} else {
// Your code :)
}
And the data,
$.ajax({
url: "connection.php",
method: "POST",
data: {
weight: weight,
person: person, // Add this
weightdate: weightdate // Add this
},
success: function(data) {
$("form").trigger("reset");
$("#success_message")
.fadeIn()
.html("data");
setTimeout(function() {
$("#success_message").fadeOut("Slow");
}, 2000);
}
});

Answer 3

Your Problem lies here.
include_once 'dbconnect/db_info.php';
Change it to something like
realpath('__DIR__'.'/dbconnect/db_info.php');
Hopefully it will solve your problem.