提问人:JahIsGucci 提问时间:8/3/2023 最后编辑:Mahesh ThoratJahIsGucci 更新时间:8/3/2023 访问量:50
JQuery/Ajax 表单验证未插入数据库
JQuery/Ajax Form Validation not Inserting into Database
问:
我有一个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')
答: 暂无答案
评论
$_POST
if(isset($_POST['submit'])){
var form_data = $(this).serialize() + '&submit=1'
submit