用数组名称克隆输入字段只得到php中的第一个值

Question

我使用jquery克隆输入字段。并使用var_dump first 在PHP中获取值

示例

<form action="save.php" method="POST">
<div id="div-container">
<div class="div-clone">
<input name="name[]">
<input name="bday[]">
<input name="address[]">
<input name="gender[]">
</div>
</div>
<input type="submit" value="SUBMIT">
</form>

现在我什么时候用克隆它

$('#div-container').append($('#div-clone').get(0).outerHTML);

PHP代码

if(isset($_POST['SUBMIT'])
{
var_dump($_POST);
}

这是否导致数组键值也与第一个相同？因为我只得到一个值只有第一个。有什么办法解决这个问题吗？

感谢

EDIT我已经从表单中获取数据了，唯一的问题是克隆的输入数组。它只得到第一个值。

再次编辑当我尝试只添加与数组同名的输入而不克隆时，它可以完美地工作。对此有什么解决方案吗？感谢

Answer 1

首先从要克隆的内容中删除id。如果你不这样做，你最终会得到无效的重复，并可能导致JS和UI中的问题。更好的方法是使用类。

此外，如果要复制元素，只需使用clone()即可。试试这个：

$('button').on('click', () => $('.div-clone:first').clone().appendTo('#div-container'));

input { width: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Clone</button>
<div class="div-clone">
<input name="name[]">
<input name="bday[]">
<input name="address[]">
<input name="gender[]">
</div>  
<div id="div-container"></div>

Answer 2

代码的输出是

array(4) {
["name"]=>
array(2) {
[0]=>
string(1) "1"
[1]=>
string(1) "2"
}
["bday"]=>
array(2) {
[0]=>
string(1) "1"
[1]=>
string(1) "2"
}
["address"]=>
array(2) {
[0]=>
string(1) "1"
[1]=>
string(1) "2"
}
["gender"]=>
array(2) {
[0]=>
string(1) "1"
[1]=>
string(1) "2"
}
}

所以这是正确的。我克隆了一次，所以我得到了两个"name"数组、两个"bday"数组等。我想你想要另一种格式，这有点棘手。试试这个：

<button id="clone">Clone</button>
<form method="POST">
<div id="div-container">
<div class="div-clone">
<input data-field="name" name="data[0][name]">
<input data-field="bday" name="data[0][bday]">
<input data-field="address" name="data[0][address]">
<input data-field="gender" name="data[0][gender]">
</div>
</div>
<button type="submit">Submit</button>
</form>
<pre>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
var_dump($_POST);
}
?>
</pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var i = 0;
$('button#clone').on('click', () => {
const clone = $('.div-clone:first').clone();
i++;
clone.find('input').each(function() {
const fieldname = $(this).attr('data-field');
$(this).attr('name', 'data[' + i + '][' + fieldname + ']');
});
clone.appendTo($('#div-container'));
});
</script>

这将为一个克隆提供以下输出。

array(1) {
["data"]=>
array(2) {
[0]=>
array(4) {
["name"]=>
string(1) "1"
["bday"]=>
string(1) "1"
["address"]=>
string(1) "1"
["gender"]=>
string(1) "1"
}
[1]=>
array(4) {
["name"]=>
string(1) "2"
["bday"]=>
string(1) "2"
["address"]=>
string(1) "2"
["gender"]=>
string(1) "2"
}
}
}

字段名称正是PHP数组结构。使用name[]只是一个向上计数的数组。但我认为所有四个字段都应该有一个条目。因此，您必须使成为一个条目(命名数据(，使其成为一个数组，按"i"向上计数，然后添加字段名称(名称、bday等(

Answer 3

在折腾了这么多次之后，我解决了它。

在我的框架中，似乎有一个UI错误，导致我的表单在克隆后在near-div元素上结束。谢谢你的回答。你的答案都是对的，所以我会支持他们。非常感谢。