weixin_33711647 2020-04-08 11:48 采纳率: 0%
浏览 66

HTML AJAX未执行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.

  • 写回答

3条回答 默认 最新

  • weixin_33709609 2020-04-08 13:04
    关注

    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);
                    }
                  });
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名