jQuery/PHP 动态表单提交
Posted
技术标签:
【中文标题】jQuery/PHP 动态表单提交【英文标题】：jQuery/PHP dynamic form submission 【发布时间】：2021-01-26 06:31:24 【问题描述】：我正在寻找一种在一次提交中提交多个动态表单字段的方法。 提交时的每一行数据将共享某些属性：工作 ID、客户、工作类型。 同时还保留自己的自变量：角色、姓名、tvl、开始日期、结束日期、开始时间、结束时间。
我认为我的解决方案要么需要一个 for 循环，要么需要使用多维数组（可能两者兼而有之？），但我不知道在我的代码中的哪个位置或如何实现。
目前 - 我的数据库中只显示了 1 个“员工” - 通常是“详细信息” div 中的最后一个条目。
代码如下：
HTML index.php
<?php
session_start();
?>
<!DOCTYPE html>
<head>
</head>
<body>
<form method="POST" action="include/ajax.inc.php" class="ajax">
<h2>Job Details</h2>
<br>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Job ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="a" id="a">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Client</label>
<div class="col-sm-10">
<select type="text" class="form-control" name="b" id="b">
<option value="" disabled selected>Select</option>
<option value="OPTION1" name="OPTION1">OPTION1</option>
<option value="OPTION2" name="OPTION2">OPTION2</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Type of Work</label>
<div class="col-sm-10">
<select type="text" class="form-control" name="c" id="c">
<option value="" disabled selected>Select</option>
<option value="OPTION1" name="OPTION1">OPTION1</option>
<option value="OPTION2" name="OPTION2">OPTION2</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<h2>Employee Details</h2>
<button class="btn btn-lg btn-primary btn-rounded m-sm" id="add">
<small>ADD EMPLOYEE</small>
</button>
<!--- ADD EMPLOYEES --->
<div class="ibox" id="details" name="details[]">
<div class="ibox-content">
<div class="container">
<div class="row">
<div class="col">
<label class="form-label">Position</label>
<select class="form-control" type="text" name="d" id="d">
<option value="" disabled selected>Select</option>
<option value="ROLE1" name="SPV">ROLE1</option>
<option value="ROLE2" name="REG">ROLE2</option>
</select>
</div>
<div class="col">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="e" id="e">
</div>
<div class="col">
<label class="form-label">TVL</label>
<input type="text" class="form-control" name="f" id="f">
</div>
<div class="col">
<label class="form-label">Start Date</label>
<input type="date" class="form-control" name="g" id="g">
</div>
<div class="col">
<label class="form-label">End Date</label>
<input type="date" class="form-control" name="h" id="h">
</div>
<div class="col">
<label class="form-label">Start Time</label>
<input type="time" class="form-control" name="i" id="i">
</div>
<div class="col">
<label class="form-label">End Time</label>
<input type="time" class="form-control" name="j" id="j">
</div>
<div class="col text-right m-t-lg">
</div>
</div>
</div>
</div>
</div>
<!--- ADD EMPLOYEES END --->
<div class="hr-line-dashed"></div>
<button type="submit" class="btn btn-primary btn-med" name="submit">Submit</button>
</form>
<!-- SCCRIPT-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JS main.js
$(document).ready(function()
var html = ' <div class="ibox" id="details" name="details[i]"> <div class="ibox-content"> <div class="container"> <div class="row"> <div class="col"> <label class="form-label">Position</label> <select class="form-control" type="text" name="d" id="d"> <option value="" disabled selected>Select</option> <option value="SPV" name="SPV">SPV</option> <option value="REG" name="REG">REG</option> </select> </div> <div class="col"> <label class="form-label">Name</label> <input type="text" class="form-control" name="e" id="e"> </div> <div class="col"> <label class="form-label">TVL</label> <input type="text" class="form-control" name="f" id="f"> </div> <div class="col"> <label class="form-label">Start Date</label> <input type="date" class="form-control" name="g" id="g"> </div> <div class="col"> <label class="form-label">End Date</label> <input type="date" class="form-control" name="h" id="h"> </div> <div class="col"> <label class="form-label">Start Time</label> <input type="time" class="form-control" name="i" id="i"> </div> <div class="col"> <label class="form-label">End Time</label> <input type="time" class="form-control" name="j" id="j"> </div> <div class="col text-right m-t-lg"> </div> <div class="col text-right m-t-lg"> <button class="btn btn-sm btn-rounded btn-danger" id="remove"> <i class="fa fa-times"></i> </button> </div></div> </div> </div> </div>'
// Add rows to the form
$(function()
$('#add').click(function(e)
$('#details').append(html);
e.preventDefault();
);
// Remove rows from the form
$(this).on('click', '#remove', function(e)
$(this).closest('#details').remove();
);
);
);
$('form.ajax').on('submit', function()
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = ;
that.find('[id]').each(function(index, value)
var that = $(this),
name = that.attr('id'),
value = that.val();
data[name] = value;
);
$.ajax (
url: url,
type: method,
data: data,
success: function(response)
console.log(response);
);
return false;
);
PHP ajax.inc.php
<?php
include 'form.dbh.php';
$jobid = mysqli_real_escape_string($conn,$_POST['a']);
$client = mysqli_real_escape_string($conn,$_POST['b']);
$type = mysqli_real_escape_string($conn,$_POST['c']);
$role = mysqli_real_escape_string($conn,$_POST['d']);
$name = mysqli_real_escape_string($conn,$_POST['e']);
$tvl = mysqli_real_escape_string($conn,$_POST['f']);
$sdate = mysqli_real_escape_string($conn,$_POST['g']);
$edate = mysqli_real_escape_string($conn,$_POST['h']);
$stime = mysqli_real_escape_string($conn,$_POST['i']);
$etime = mysqli_real_escape_string($conn,$_POST['j']);
$sql = "INSERT INTO timesheets(jobid, client, type, role, name, tvl, sdate, edate, stime, etime) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?);";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql))
echo "SQL error";
else
mysqli_stmt_bind_param($stmt, 'ssssssssss', $jobid, $client, $type, $role, $name, $tvl, $sdate, $edate, $stime, $etime);
mysqli_stmt_execute($stmt);
header("Location:../index.php?success");
?>
有人有想法吗？或者有什么建议？
【问题讨论】：
欢迎来到 Stack Overflow。使用表单提交，您将希望在执行 AJAX 调用时阻止默认操作。最好添加一个事件变量e，然后在回调中调用.preventDefault()。
我还看到您在同一个回调中使用了两次that。它应该被分开，但它可能不够明确以至于它会覆盖原来的that。根据经验，尽可能使用唯一的变量名。
请提供更多见解 - 您的应用程序的哪一部分未按预期工作？您的问题不太可能一次性涵盖 javascript、PHP、HTML、jQuery 和 SQL
我希望在一个提交函数中提交多个附加条目 - 目前只有一个条目（最后一个子项）正在提交，而其他附加条目（包括父条目）未提交已提交。
【参考方案1】：
考虑以下内容。
$(function()
var html = ' <div class="ibox" id="details" name="details[i]"> <div class="ibox-content"> <div class="container"> <div class="row"> <div class="col"> <label class="form-label">Position</label> <select class="form-control" type="text" name="d" id="d"> <option value="" disabled selected>Select</option> <option value="SPV" name="SPV">SPV</option> <option value="REG" name="REG">REG</option> </select> </div> <div class="col"> <label class="form-label">Name</label> <input type="text" class="form-control" name="e" id="e"> </div> <div class="col"> <label class="form-label">TVL</label> <input type="text" class="form-control" name="f" id="f"> </div> <div class="col"> <label class="form-label">Start Date</label> <input type="date" class="form-control" name="g" id="g"> </div> <div class="col"> <label class="form-label">End Date</label> <input type="date" class="form-control" name="h" id="h"> </div> <div class="col"> <label class="form-label">Start Time</label> <input type="time" class="form-control" name="i" id="i"> </div> <div class="col"> <label class="form-label">End Time</label> <input type="time" class="form-control" name="j" id="j"> </div> <div class="col text-right m-t-lg"> </div> <div class="col text-right m-t-lg"> <button class="btn btn-sm btn-rounded btn-danger" id="remove"> <i class="fa fa-times"></i> </button> </div></div> </div> </div> </div>'
$('#add').click(function(e)
$('#details').append(html);
e.preventDefault();
);
// Remove rows from the form
$(this).on('click', '#remove', function(e)
$(this).closest('#details').remove();
);
$('form.ajax').on('submit', function(e)
e.preventDefault();
var that = $(this),
u = that.attr('action'),
t = that.attr('method'),
d = ;
that.find('[id]').each(function(i, el)
d[$(el).attr("id")] = $(el).val();
);
$.ajax(
url: u,
type: t,
data: d,
success: function(response)
console.log(response);
);
return false;
);
);
这可以解决您遇到的一些问题。使用.each() 时，您将拥有一个索引和元素，而不是一个值。
更新
上面的代码将根据form.ajax选择器提交所有数据。当表单中只有一部分详细信息时，这就是将要提交的所有数据。如果添加 HTML，则会导致元素的 ID 属性不再唯一的 HTML/JS 问题。所有 ID 都必须是唯一的。
考虑忽略 ID 并改用 name 属性。当您收集数据时，对于 d 到 j，这些数据需要是数组，因为这些是重复的项目。
考虑以下内容。
$(function()
function getData(f)
var myData =
a: $("[name='a']", f).val(),
b: $("[name='b']", f).val(),
c: $("[name='c']", f).val(),
d: [],
e: [],
f: [],
g: [],
h: [],
i: [],
j: []
;
var k, v;
$("[name]", f).each(function(i, el)
k = $(el).attr("name");
v = $(el).val();
if (i > 2)
myData[k].push(v);
);
console.log(myData);
return myData;
$('#add').click(function(e)
var html = $("#details > .ibox-content:eq(0)").clone(true);
$(".col:last", html).html("<button class='btn btn-sm btn-rounded btn-danger remove' id='remove-" + $(".ibox-content").length + "'> <i class='fa fa-times'></i> </button>");
$(".ibox-content:last").after(html);
e.preventDefault();
);
$("#details").on('click', '.remove', function(e)
$(this).closest('.ibox-content').remove();
);
$("form.ajax").submit(function(e)
e.preventDefault();
$.ajax(
url: $(this).attr("action"),
type: "POST",
data: getData(this),
success: function(response)
console.log(response);
);
);
);<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="include/ajax.inc.php" class="ajax">
<h2>Job Details</h2>
<br>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Job ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="a" id="a">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Client</label>
<div class="col-sm-10">
<select type="text" class="form-control" name="b" id="b">
<option value="" disabled selected>Select</option>
<option value="OPTION1">OPTION1</option>
<option value="OPTION2">OPTION2</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Type of Work</label>
<div class="col-sm-10">
<select type="text" class="form-control" name="c" id="c">
<option value="" disabled selected>Select</option>
<option value="OPTION1">OPTION1</option>
<option value="OPTION2">OPTION2</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<h2>Employee Details</h2>
<button class="btn btn-lg btn-primary btn-rounded m-sm" id="add"><small>ADD EMPLOYEE</small></button>
<!--- ADD EMPLOYEES --->
<div id="details" class="ibox">
<div class="ibox-content">
<div class="container">
<div class="row">
<div class="col">
<label class="form-label">Position</label>
<select class="form-control" type="text" name="d" id="d">
<option value="" disabled selected>Select</option>
<option value="ROLE1">ROLE1</option>
<option value="ROLE2">ROLE2</option>
</select>
</div>
<div class="col">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="e" id="e">
</div>
<div class="col">
<label class="form-label">TVL</label>
<input type="text" class="form-control" name="f" id="f">
</div>
<div class="col">
<label class="form-label">Start Date</label>
<input type="date" class="form-control" name="g" id="g">
</div>
<div class="col">
<label class="form-label">End Date</label>
<input type="date" class="form-control" name="h" id="h">
</div>
<div class="col">
<label class="form-label">Start Time</label>
<input type="time" class="form-control" name="i" id="i">
</div>
<div class="col">
<label class="form-label">End Time</label>
<input type="time" class="form-control" name="j" id="j">
</div>
<div class="col text-right m-t-lg">
</div>
</div>
</div>
</div>
</div>
<!--- ADD EMPLOYEES END --->
<div class="hr-line-dashed"></div>
<button type="submit" class="btn btn-primary btn-med">Submit</button>
</form>您可能会注意到，现在只有特定元素具有name 属性。 DIV 元素不应使用name，OPTION 也是如此。 DIV 不是表格的一部分。 OPTION 是 SELECT 的一个元素部分，它是父容器和表单元素，它应该有name。
您的 PHP 将获得复杂的数据负载。例如：
"a": "2020",
"b": "OPTION1",
"c": "OPTION2",
"d": [
"ROLE1",
"ROLE2"
],
"e": [
"Bob",
"Nancy"
],
"f": [
"1",
"2"
],
"g": [
"2020-10-12",
"2020-10-12"
],
"h": [
"2020-10-16",
"2020-10-16"
],
"i": [
"08:00",
"08:00"
],
"j": [
"12:00",
"12:00"
]
您需要调整您的 PHP 以处理这种新的数据格式。
【讨论】：
谢谢！这很好地清理了它，但我仍然遇到只有 1 个条目被提交到数据库的问题。我想在提交点击时提交多个条目，是否应该使用 forloop 来完成？ 编辑：澄清一下——这个编辑允许我“提交”下一个条目，这是一个巨大的改进，但我相信我想要做的是一次“提交”所有条目而不是一个接一个的 @jadew 我很高兴它做到了。如果它回答了您的问题，我希望您将其标记为答案以及支持。 会的！最后一个问题 - 当我在var myData 添加一个新元素/变量时，我遇到了一个错误。例如，我想在 a: $("[name='a']", f).val(), 上方添加另一个名为 id: $("[name='id']", f).val(), 的变量（遵循与变量 a、b、c 相同的规则）当我这样做时，myData[k].push(v); 和 var k,v; 变得无法识别。您能否提出原因以及解决方案可能是什么？以上是关于jQuery/PHP 动态表单提交的主要内容，如果未能解决你的问题，请参考以下文章