如何动态添加一个HTML数组元素[]

我有一个表单，我需要动态地添加尽可能多的文本字段作为用户想要的。我希望文本字段是一个数组，例如：如何动态添加一个HTML数组元素[]

<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"); 
});

来源

2012-04-04 Phill Tidd

您应该检查的HTTP事务的样子。在发布表单时，您可以使用[插入数据]（http://goo.gl/1AES9）等Firefox插件查看传出HTTP请求的确切状态。如果输入元素显示在页面上，那么这很可能不是JavaScript问题。 – Pointy 2012-04-04 14:01:10

请确保输入'room_text []'的名称属性设置正确......如果它们全都相同，那么您将遇到提及的行为 – xandercoded 2012-04-04 14:03:17

您是否可以避免PHP参数array-name'[]'一起处理？也许在表单外部输入文本，然后在提交时收集它们的值，将它们的值整理成隐藏的输入（在表单内）并将其发布到服务器。 – 2012-04-04 14:06:42

我相信这个问题存在于.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"); 
});

来源

2012-04-04 14:15:41

我认为，旧版本的IE和'.clone（）'有一些已知问题......关于“深度复制”功能。 – 2012-04-04 14:17:07

我试过你发给我的代码，它仍然做同样的事情，只读第一个元素 – 2012-04-04 17:29:21

相同的代码适用于我 - http://timothyaaron.com/test.php。你确定它不是你的PHP？ – 2012-04-04 18:31:25

如何动态添加一个HTML数组元素[]

回答

相关问题