Question posted in
You can find the official documentation here.

HTML AJAX not executing PHP – Jquery ajax

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.

Tags:

3

Answers


  1. 0

    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);
                }
              });
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search