通过 AJAX 添加的表单字段无法加载到 $_POST 数组中答案

【问题标题】：Form fields added via AJAX fail to load into the $_POST array通过 AJAX 添加的表单字段无法加载到 $_POST 数组中
【发布时间】：2011-02-23 18:22:42
【问题描述】：

我有一个简单的 HTML 表单，它允许人们订购一些小册子。表单首先加载的内容看起来有点像这样：

<script type="text/javascript">
  var tableRowN = 1;
</script> 

<form id="Order" name="Order" method="post" action="includes/orderCheck.php">
    <input id="name" type="text" name="name" width="100" />
    <table id="orderingTable">
      <tr class="lastRow">
        <td><div id="itemGroupdiv1">
            <input type="text" class="disabled" name="itemGroup1" id="itemGroup1" />
          </div></td>
        <td><div id="itemCodediv1">
            <input type="text" name="itemCode1" id="itemCode1" class="disabled" />
          </div></td>
        <td><div id="itemCodeVersiondiv1">
            <input type="text" class="disabledSmall" id="itemcodeversion1" name="itemcodeversion1" />
          </div></td>
      </tr>
    </table>
    <input type="submit" name="submit" id="submit"/>
  </form>

然后，当用户想要在表格中添加新行时，他可以单击一个按钮，该按钮会触发以下 javascript 函数以通过 AJAX 获取新表格代码并将其插入。

function createItemLine() {
tableRowN++;    
$('tr.lastRow').attr('class', '');
    $('#orderingTable').append('<tr class="lastRow"></tr>');
    $.ajax({
      url: "/orderingTable.php?rNumber=" + tableRowN,
      cache: false,
      success: function(html){
        $("tr.lastRow").append(html);
        alert('loaded');
      }
    }); 
}

然后 AJAX 函数运行到 PHP 脚本，该脚本创建下一行，将 ID 和名称等滚动到数字 +1。

<td><div id="itemGroupdiv2">
<input type="text" class="disabled" name="itemGroup2" id="itemGroup2" />
</div></td>
<td><div id="itemCodediv2">
<input type="text" name="itemCode2" id="itemCode2" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv2">
<input type="text" class="disabledSmall" id="itemcodeversion2" name="itemcodeversion2" />
</div></td>

到目前为止，没有什么令人惊讶的？一切都应该很简单......

问题是当我添加新行（在 Firefox 和 Chrome 中）时，表单提交过程会完全忽略新行，并且它们永远不会传递到 $_POST 数组中。

这是一个已知问题吗？我以前没有遇到过这种情况...

感谢您的任何指点， H

【问题讨论】：

标签： ajax dom forms jquery

【解决方案1】：

使用jQuery.trim(data)，但这不太确定，因为会影响您的数据内容。或查看this one 可能对您有所帮助

【讨论】：

嗯，这似乎只是 Firefox 和 Chrome 中处理 DOM 方式的一个“功能”？我已经搜索了 StackOverflow 和网络，完全没有关于如何解决这个问题的线索。我希望为我的项目解决此问题的方法是停止依赖 AJAX，而是使用页面上的 JQuery 脚本来执行新行插入。
虽然很遗憾 - 这（显然）是对 AJAX 使用的限制。我真的很惊讶更多的人没有将此作为一个问题提出或在博客上发表。

【解决方案2】：

您的表格是否缺少 html id？ jQuery 选择器 $('#orderingTable') 正在寻找 id="orderingTable"

的东西

【讨论】：

哦，抱歉，这只是糟糕的示例代码——我必须先把大量的东西删掉，然后再把它贴在这里！我已经修改了;)

【解决方案3】：

在一些彻底（我的意思是彻底）上，事实证明以下简单（但很明显）的 HTML 错误可能导致此问题：

格式错误的代码 EG 缺失等
重复或缺少表单“名称”属性

在创建经过适当验证的 HTML 时，提交的表单和所有值都已正确传递到 _POST 数组中。在尝试完全了解他们的编码方法之前，确保您的开发人员注意基础知识；）

【讨论】：

【解决方案4】：

我发现使用.html() 插入内容而不是.append() 或.prepend() 会导致插入的表单字段按预期工作。

【讨论】：

【解决方案5】：

我刚刚花了很长时间来解决这样的问题。

我正在将一个输入字段 ajax-ing 到一个表单中，并且该输入字段没有显示在 $_POST 提交数组中，这太烦人了！！！！ Aaaaanyway，我通过检查我所有的 html 来修复它，结果我的表单“打开”是在页面上的一个主 div 里面而不是外面。

因此：

<div>
    <form>
        <input type="text" name="input_field">
    </div>
</form>

现在固定为：

<form>
    <div>
        <input type="text" name="input_field">
    </div>
</form>

我知道这很傻，但是在一个巨大的形式中，很难发现！所以简而言之，只要整理好你的 html，它就会起作用，我希望能对某个地方的人有所帮助:-)

M

【讨论】：