JQuery/Ajax 表单验证未插入数据库

JQuery/Ajax Form Validation not Inserting into Database

提问人:JahIsGucci 提问时间:8/3/2023 最后编辑:Mahesh ThoratJahIsGucci 更新时间:8/3/2023 访问量:50

问:

我有一个PHP表单,在用户点击提交后将数据插入数据库。

完美工作 - 所以我通过 Jquery 添加了一些验证,使用户需要填写某些字段

验证也有效。当用户尝试提交字段不完整的表单时,系统将显示错误消息,并且不允许用户继续。

我的问题是,在所有验证错误都得到纠正后,我的表单在提交后实际上不会将任何数据插入我的数据库。提交将按照我的意图将用户重定向到一个新页面,但实际上没有数据提交到我的数据库。

不确定可能是什么问题?

这是我的用户.php页面:

<?php
if (isset($_POST['submit'])) {
    //all my INSERT INTO/UPDATE queries//    
}
?>

<body>
    <button id="addproduct" class="add">Add+</button>
    <form action="user.php" method="POST" id="insert_form">
        <p>Game #</p><input type="number" placeholder="0" name="gamenumber" class="gamenumber"></input>
        <div class="bottomrow">
            <h1>HOME</h1>
            <h2></h2>
            <h1>AWAY</h1>
        </div>
        <div class="logos">
            <div id="home-logo"></div>
            <div id="away-logo"></div>
        </div>
        <br>
        <div class="teamhomerow">
            <select name="hometeam" id="logoz" class="team">
                <option value="">Select</option>
                <?php foreach ($results2 as $result2) { ?>
                    <option value="<?= $result2['id']; ?>"><?= $result2['name']; ?></option>
                <?php } ?>
            </select>
        </div>
        <div class="teamawayrow">
            <select name="awayteam" id="logoz2" class="team">
                <option value="">Select</option>
                <?php foreach ($results2 as $result2) { ?>
                    <option value="<?= $result2['id']; ?>"><?= $result2['name']; ?></option>
                <?php } ?>
            </select>
        </div>
        <div class="toprow">
            <input type="number" name="homescore" placeholder="0" class="team-score">
            <div class="versus"><img src="versus.png" alt=""></div>
            <input type="number" name="awayscore" placeholder="0" class="team-score">
        </div>
        <div class="radio">
            <input type="radio" id="reg" name="result" value="reg">
            <label for="reg">REG</label>
            <input type="radio" id="ot" name="result" value="ot">
            <label for="ot">OT</label>
            <input type="radio" id="so" name="result" value="so">
            <label for="so">SO</label>
        </div>
        <br>
        <div class="wrapper"></div>
        <input type="submit" name="submit" value="submit" class="submit">
    </form>
    <span id="error"></span>
    <table id="item_table">
        <tr></tr>
    </table>
</body>

这是我的动态选项菜单的Jquery。这是未经验证的。完美地插入数据库:(“fil_players.php”只是另一个带有一些 SELECT 查询的 php 页面。

$(document).ready(function () {
  var count = 0; //start count at 0
  $(document).on("click", ".add", function () {
    count++;
    var html = "";
    html +=
      '<div class="goal"><select name="teamzzz[]" class="teamz" data-playerz="' +
      count +
      '"><option value="">Team</option><?php echo fill_select_box($pdo, "0"); ?></select>';
    html +=
      '<select class="goalz" name="playerzzz[]" id="playermenu' +
      count +
      '"> <option value="">Player</option></select>';
    html +=
      '<select class="assistz" name="assistzzz[]" id="assistmenu' +
      count +
      '"> <option value="">Assist</option> </select>';
    html +=
      '<button type="button" name="remove" class="remove"><span class="glyphicon glyphicon-minus">REMOVE</span></button></div>';
    $(".wrapper").append(html);
  });
  $(document).on("click", ".remove", function () {
    $(this).closest("div").remove();
  });
  $(document).on("change", ".teamz", function () {
    var teamidz = $(this).val();
    var playeridz = $(this).data("playerz");
    $.ajax({
      url: "fill_players.php",
      method: "POST",
      data: {
        team_idz: teamidz,
      },
      success: function (data) {
        var html = '<option value="">Player</option>';
        html += data;
        $("#playermenu" + playeridz).html(html);
        $("#assistmenu" + playeridz).html(html);
      },
    });
  });
  //validation part//
});

现在这里是我添加验证的地方。我把它放在下面 如上所述,它会捕获并显示错误。但是当我修复它们并单击提交时,实际上没有任何东西插入到我的数据库中。提交后,我只是被重定向到正确的页面(用户.php - 我所有的INSERT查询都在那里),我的数据库中没有新数据。

这是我在脚本底部的“验证部分”之后添加的验证:

$("#insert_form").on("submit", function (event) {
  event.preventDefault();
  var error = "";
  $(".teamz").each(function () {
    var count = 1;
    if ($(this).val() == "") {
      error += "<p>Select team at " + count + " row</p>";
      return false;
    }
    count = count + 1;
  });
  $(".goalz").each(function () {
    var count = 1;
    if ($(this).val() == "") {
      error += "<p>Select goal " + count + " Row</p> ";
      return false;
    }
    count = count + 1;
  });
  $(".assistz").each(function () {
    var count = 1;
    if ($(this).val() == "") {
      error += "<p>Enter assist at " + count + " Row</p>";
      return false;
    }
    count = count + 1;
  });
  var form_data = $(this).serialize();
  if (error == "") {
    $.ajax({
      url: "user.php",
      method: "POST",
      data: form_data,
      success: function (data) {
        window.location = "user.php";
        if (data == "ok") {
          $("#item_table").find("tr:gt(0)").remove();
          $("#error").html(
            '<div class="alert alert-success">Item Details Saved</div>'
          );
        }
      },
    });
  } else {
    $("#error").html('<div class="alert alert-danger">' + error + "</div>");
  }
});

我有一种感觉,这可能与on.submit函数有关吗?我尝试删除on.submit函数,但提交按钮根本不起作用。我认为这在某种程度上与我的常规PHP插入查询相冲突,并且似乎找不到解决方案。

我相信我只需要在我的ajax / jquery中做一个小调整。任何帮助都非常感谢

更新:Barmar找到了解决方案:

var form_data = $(this).serialize() + '&submit=1';

我唯一的问题是,如果用户一开始就不添加这些动态选项,表单仍然不会发布。那是因为下面的行只是告诉它如果没有错误就发布......但是,如果变量一开始就不存在呢?

我认为它与下面的这一行有关,就在序列化行之后:

if(error == '')

我尝试做如下事情,但没有用:

if(error == '') || (error == 'undefined')
PHP jQuery AJAX 表单 验证

评论

0赞 Markus Zeller 8/3/2023
1) 在浏览器中调试请求。2)在PHP中调试变量。$_POST
0赞 mplungjan 8/3/2023
1. 永远不要在表单中称呼任何“提交”,所以重命名它。2. 如果你对表单进行ajax,那么你的ajax实际上并没有发送“提交”,所以会失败。在页面和PHP中重命名后发送if(isset($_POST['submit'])){
2赞 Barmar 8/3/2023
或者用于添加参数。var form_data = $(this).serialize() + '&submit=1'submit
0赞 JahIsGucci 8/3/2023
@Barmar哇,它奏效了 - 非常感谢!
0赞 JahIsGucci 8/3/2023
@mplungjan感谢您的建议。我实际上也尝试过,但仍然有同样的问题:/可能做错了,所以我下次会记住这一点

答: 暂无答案