如何动态添加 HTML 数组元素[]答案

【问题标题】：How to dynamically add an HTML array element[]如何动态添加 HTML 数组元素[]
【发布时间】：2012-04-18 06:02:54
【问题描述】：

我有一个表单，我需要根据用户的需要动态添加尽可能多的文本字段。我希望文本字段是一个数组，例如：

<input type="text" name="room_text[]">

我已经构建了一些我认为可行的东西。它成功地添加了更多的文本框。我用javascript动态添加了两个文本框，使表单看起来像这样：

<input type="text" name="room_text[]">
      <input type="text" name="room_text[]">
      <input type="text" name="room_text[]">

但是，当我将它发布到 PHP 文件时，它只获得第一个值。我知道这是一个 javascript 问题的原因是因为如果您在页面加载时有多个文本框，它可以正常工作。只是当您使用 javascript 添加更多文本框时。

如果有帮助，这是我用来添加框的 jquery 函数：

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = $(this).parent('td').parent('tr').clone();
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).css("display", "none");
    $(mu).after(clone);
    $(clone).show("fast");
});

【问题讨论】：

您应该检查一下 HTTP 事务的样子。您可以使用像 Tamper Data 这样的 Firefox 插件在您发布表单时查看传出 HTTP 请求的确切状态。如果输入元素出现在页面上，那么这不太可能是 JavaScript 问题。
确保输入 room_text[] 的名称属性设置正确......如果它们都相同，那么您将遇到上述行为
你能完全避免PHP参数数组名'[]'处理吗？也许在表单之外有文本输入，然后在提交时收集它们的值，将它们的值整理到“隐藏”输入（在表单内）并将其发布到服务器。
@Xander 确保属性输入设置正确是什么意思？
name 属性对于每个输入文本字段必须是唯一的...

标签： php javascript jquery html dom

【解决方案1】：

我相信问题在于.clone() 函数。你能不能试试不同的方法，比如说...

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = '<tr>' + $(this).parent('td').parent('tr').html() + '</tr>';
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).css("display", "none");
    $(mu).after(clone);
    $(clone).show("fast");
});

已更新 - 糟糕。在那个版本中，“克隆”是一个字符串，而不是一个元素，所以 .children() 函数不起作用......这是一个更正的版本：

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = $('<tr>' + $(mu).html() + '</tr>');
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).hide();
    $(mu).after(clone);
    $(clone).show("fast");
});

【讨论】：

旧版本的 IE 和 .clone() 存在已知问题……我认为是“深拷贝”功能。
我试过你发给我的代码，它仍然做同样的事情，只读取第一个元素
同样的代码适用于我——timothyaaron.com/test.php。你确定这不是你的 PHP？
我不这么认为，但可能。我做了 $_POST['room_text'] 的 print_r 并且只给出了第一个元素
实际上，我使用 javascript 插入的任何内容都不会在 PHP 中被拾取。不仅仅是数组