我有一个包含多个元素的html表单。现在，我特别希望您注意的是两个保管箱，旁边还有一个"添加"button.so，一旦用户从下拉列表中选择并按下"添加"按钮，它会将数据添加到表中，该表将显示在这些保管箱下方。因此，基本上用户可以通过下拉列表添加多个数据并在表中查看它。现在，当我想在提交表单时从此表中检索数据时，就会出现问题。我不确定 $_PHP[''] 是否能够从我创建的表中获取数据。
因此，作为替代方案，我正在尝试在提交表单时使用 AJAX 传递数据！
.HTML：
<form name="input" id="formToSubmit" action="process-host.php" method="post" enctype="multipart/form-data">
/* Form data goes here*/
<input type="button" class="submit" value="Submit Request" onclick="valField(this.form); "/>
valField(( 方法验证并提交表格。
.JS：
function valField(form) //field validation for the form before submit
{
/*Validation code goes here*/
//if(validated){
$("#formToSubmit").submit(function(e) { //this.submit(function(e)){
e.preventDefault();
var tableForNew = new Array(); //to store the infoDisplayTable data
$('#infoDisplayTable1l tr').each(function() {
tableForNew.push($(this).find("td:first").html());
tableForNew.push($(this).find("td:second").html());
});
// Get all INPUT form data and organize as array
var formData = $(this).serializeArray();
// Encode with JSON
var tableForNew1 = JSON.stringify(tableForNew);
// Add to formData array
formData.push({name: 'tableForNew', value: tableForNew1});
// Submit with AJAX
$.ajax({
url: "./process-host.php",
data: formData,
type: 'post',
success: function() {
alert("BOOM! IT WORKED;");
}
});
});
在服务器端，在进程主机.php中，
$tableForNew = json_decode($_POST['tableForNew']);
这显然是行不通的，所以当我使用 Firebug 调试时，我可以看到它没有进入提交函数。它只是提交表单，而不通过内部代码！这就是为什么它不向服务器发布任何表数据并给出错误通知 未定义的索引：tableForNew .
那么，我能在这里做些什么来让它工作？有什么建议吗？
当您使用内联点击处理程序时，您需要返回 false，否则将触发默认操作(提交表单(。
但是，您现在进行此设置的方式，valField 函数将只定义提交处理程序并返回 - 这意味着即使您返回 false，您也必须再次单击按钮以触发提交事件，这也将触发 valField 函数并重新定义提交处理程序(inception！
您应该删除按钮元素上的 onclick 处理程序，将提交处理程序移出 valField 函数，并且仅在表单有效时才执行 ajax 调用。
好吧，在提交表单时进行 AJAX 调用对我来说毕竟不起作用，但我确实以某种方式成功地从服务器端的 HTML 表中获取数据！现在对我有用的解决方案是向表单添加隐藏字段。基本上，当用户输入值并按下"添加"按钮时，我会添加隐藏的<input>字段，因此它在"添加"按钮的onClick事件处理程序中！这是该函数的样子，
function addData1(){
if($("#consumerDropDown").val() != "" && $("#authenticationTypeDropDown").val() != "")
{
$("#infoDisplayTable1").show();
$("#infoDisplayTable1").attr("disabled", false);
$("#infoDisplayTable1").append("<tr><td >"+$("#consumerDropDown").val()+"</td><td>"+
$("#authenticationTypeDropDown").val()+"</td></tr>");
$("#tester").append("<input type='text' value='" +$("#consumerDropDown").val() + "----->"+$("#authenticationTypeDropDown").val() + "' name='dTable1"+ counter1+ "'>");
counter1++;
}
else
{
alert("Please make a valid selection from a drop-down before adding it to the list!");
}}
在这里，请注意，我已经将计数器 1 定义为 JS 文件中的 globel 变量。测试人员的 ID 被分配给属性显示：无的<div>标签。更多关于，我正在动态分配<input>标签的名称属性(例如，这里是 dTable10、dTable11 等(，因此在服务器端访问它会更容易！
最后，在提交表单之前，我将 counter1 变量传递给隐藏字段，就像我在上面所做的那样， $("#tester").append("<input type='text' name='counter1' value='"+counter1+"'>"); form.submit();
服务器端：
$counterA = intval($_POST['counter1']);
for($i=0;$i<$counterA;$i++)
{
$createReq['comment'] .= $_POST["dTable1"."{$i}"]."'n";
}
在这里，基本上我将此值附加到字符串变量中。它将遍历每个项目，并附加到变量中。
所以，这对我来说是一个解决方案！但是，如果 AJAX 调用在提交表单时有效(我之前尝试做的事情(，我会更满意！