Question

快速背景故事。我有一个简单表单的一部分，允许用户添加/删除一行三个输入。我原本以为我只会使用jQuery来显示/隐藏静态字段，但我四处寻找并找到了一个似乎运行良好的解决方案。

（参考：http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1#comment-6093）

就数组而言，我的工作是： Submitting a multidimensional array via POST with php

HTML

<div class="multi-field-wrapper">
    <div class="multi-fields">
        <div class="multi-field">
            <button type="button" class="remove-field" title="Remove Product">&times;</button>
            <input type="text" name="part[][number]" class="part-number-input" placeholder="">
            <input type="number" name="part[][quantity]" placeholder="">                                                    
            <input type="number" name="part[][tolerance]" class="" placeholder="">
        </div>
    </div>
    <button type="button" class="add-field" title="Add Product">+</button>
</div>

PHP

if(isset($_POST['part']))
{
    $message .='<table>';
    $message .='<tr><td><b>Part #</b></td><td><b>Quantity</b></td><td><b>Tolerance</b></td></tr>';
    foreach ($_POST['part'] as $parts)
    {
        $message .='<tr>';
        $message .='<td> '.$parts['number'].' </td>';
        $message .='<td> '.$parts['quantity'].' </td>';
        $message .='<td> '.$parts['tolerance'].' </td>';
        $message .='</tr>';
    }
    $message .='</table>';
}

输出到电子邮件

Part #   Quantity   Tolerance
part1#
         part1qty
                    part1tol
part2#
         part2qty
                    part2tol

我只是用极其简单的形式搞砸了，所以任何帮助都会非常感激！

更新：添加克隆字段的jQ。

JS

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).fadeIn(300).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

同样，我真的很感激帮助。

Answer 1

一般来说，array[]语法会对数组中的新索引进行赋值。换句话说，如果您没有指定索引，它将为您创建一个索引。

您的代码中发生的事情是您每次都为阵列分配一个新索引。例如，

part[][number]    => part[0][number]
part[][quantity]  => part[1][quantity]
part[][tolerance] => part[2][tolerance]

问题的快速解决方案是指定索引而不是创建新索引。例如，

<input type="text" name="part[0][number]">
<input type="number" name="part[0][quantity]">                                                    
<input type="number" name="part[0][tolerance]">

<input type="text" name="part[1][number]">
<input type="number" name="part[1][quantity]">                                                    
<input type="number" name="part[1][tolerance]">

根据您尝试执行的操作，提交JSON数据而不是多维表单数据可能更容易。特别是如果这是通过javascript生成的话。

Answer 2

这里的问题是你没有在多维数组中指定第一个索引，所以PHP无法将这些项绑定在一起。

你得到的是这样的：

Array(
    0 => Array(
        'number' => ...
    ),
    1 => Array(
        'quantity' = > ...
    ),
    2 => Array(
        'tolerance' = > ...
    ),
    3 => Array(
        'number' => ...
    ),
    4 => Array(
        'quantity' = > ...
    ),
    5 => Array(
        'tolerance' = > ...
    ),
    ...
)

每次设置内部数组值时，您都会看到外部数组中有新元素。

您需要将标记更改为：

<input type="text" name="part[0][number]">
<input type="number" name="part[0][quantity]">                                                    
<input type="number" name="part[0][tolerance]">

<input type="text" name="part[1][number]">
<input type="number" name="part[1][quantity]">                                                    
<input type="number" name="part[1][tolerance]">

这将确保内部数组项被分组到正确的外部数组位置。

Answer 3

感谢那些帮助我确定问题的人。

这是我如何解决我的特定问题。它可能不是最漂亮的解决方案，但我并不想复制我用来复制这个数组的JS。

首先我更改了HTML：

<input type="text" name="part_number[]" class="part-number-input">
<input type="number" name="quantity[]">                                                    
<input type="number" name="tolerance[]">

然后问题就是让它在另一端出来。根据这个问题的解决方案How to get form input array into PHP array，我修改了我的PHP：

$part_number = $_POST['part_number'];
$quantity = $_POST['quantity'];
$tolerance = $_POST['tolerance'];

if(isset($_POST['part_number']))
{
    $message .='<table>';
    $message .='<tr><td><b>Part #</b></td><td><b>Quantity</b></td><td><b>Tolerance</b></td></tr>';
    foreach ( $part_number as $key => $part)
    {
        $message .='<tr>';
        $message .='<td> '.$part.' </td>';
        $message .='<td> '.$quantity[$key].' </td>';
        $message .='<td> '.$tolerance[$key].' </td>';
        $message .='</tr>';         
    }
    $message .='</table>';
}

完全符合我的预期。我确定如果花时间做这样的事情，How to add (clone) form fields using jQuery and increment ids and names，我本可以保持我的PHP。我只是不想破坏我已经运作良好的JS的简单性。

再次感谢！

PHP表单返回一个级联数组

3 个答案: