HTML AJAX not executing PHP

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

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">

Advertisement

Answer