在 POST 数组中排列输入数据答案

【问题标题】：arranging input data in POST-array在 POST 数组中排列输入数据
【发布时间】：2015-06-25 08:07:49
【问题描述】：

我创建了一个包含大量相似区域的表单。可以使用 jQuery 添加这些区域。每个区域相当于一个用于组装产品的工作步骤，因此它具有相同的输入字段（描述、持续时间、...）。下面是代码（简化为两个硬编码区域）：

<html>
<head>
</head>
<body>
<form action="insertNewProduct.php" method="post">
    <fieldset id="product-fieldset">
        <legend>Produkt</legend>
        <div id="step-container">
            <input type="hidden" name="step[]" />
            <div id="step-table" class="product-table">
                <table id="basis-table">
                    <!-- STEP-BASISDATEN -->
                    <thead id="step-basis">
                        <!-- Basisdaten Schritt -->
                        <tr>
                            <th class="data-title">Arbeitsschritt</th>
                        </tr>
                        <tr>
                            <th>Bezeichnung:</th>
                            <td><input type="text" name="step[0][stepDescr]"></td>
                        </tr>
                        <tr>
                            <th>Dauer:</th>
                            <td><input type="text" name="step[0][stepDur]"></td>
                        </tr>
                    </thead>
                </table>
            </div>

            <div id="step-table" class="product-table">
                <table id="basis-table">
                    <!-- STEP-BASISDATEN -->
                    <thead id="step-basis">
                        <!-- Basisdaten Schritt -->

                        <tr>
                            <th class="data-title">Arbeitsschritt</th>
                        </tr>
                        <tr>
                            <th>Bezeichnung:</th>
                            <td><input type="text" name="step[1][stepDescr]"></td>
                        </tr>
                        <tr>
                            <th>Dauer:</th>
                            <td><input type="text" name="step[1][stepDur]"></td>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </fieldset>
    <input type="submit" id="sendForm" value="Send"><input type="reset" id="resetForm" value="Reset">
</form>
</body>
</html>

如您所见，我在步骤中添加了数字

name="step[0][stepDescr]"

因此我得到了想要的结果：

Array
(
    [step] => Array
        (
            [0] => Array
                (
                    [stepDescr] => 
                    [stepDur] => 
                )

            [1] => Array
                (
                    [stepDescr] => 
                    [stepDur] => 
                )

        )

)

如果我不使用这些数字，我的数组当然无法使用：

Array
(
    [step] => Array
        (
            [0] => 
            [1] => Array
                (
                    [stepDescr] => 
                )

            [2] => Array
                (
                    [stepDur] => 
                )

            [3] => Array
                (
                    [stepDescr] => 
                )

            [4] => Array
                (
                    [stepDur] => 
                )

        )

)

如何使用 jQuery 将这些数字（基于步数）添加到我的 HTML 代码 (!) 中？

【问题讨论】：

你可以在php中使用for()或foreach()循环并打印出来。
我不想使用 php 重新排列和处理数组。我的目标是提交一个合适的数组。我认为 - 如果您有 100 个甚至更多的工作步骤 - 一旦提交正确更改数组顺序就会变得非常复杂。
检查我的答案。也许它会帮助你。

标签： php jquery arrays forms

【解决方案1】：

您可以使用custom attributes。它们是 HTML5 规范的一部分。

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。

输入字段的名称可以存储在自定义属性中：

<input type="text" name="step[0][stepDescr]" data-name="stepDescr" />

并在克隆字段集的函数中根据步骤容器的计数构造名称。请务必将元素的 id 更改为类，因为如果克隆它们，它们不再是唯一的。

function addStep(){
    var count = $('.step-container').length;
    var $container = $('.step-container:last').clone();
    $container.find(':input').each(function(){
        var input_name = 'step['+count+']['+$(this).attr("data-name")+']';
        $(this).attr('name', input_name);
    });
    $container.appendTo("#product-fieldset");
};

【讨论】：

谢谢，帮了大忙。你能给我一些关于这个“数据名称”的额外信息吗？

【解决方案2】：

我想这应该可以解决问题。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    var areaNbr = 0;
    function addArea(frm) {
        areaNbr ++;
        var area = '<p id="area'+areaNbr+'">Bezeichnung: <input type="text" name="step['+areaNbr+'][stepDescr]"> Dauer: <input type="text" name="step['+areaNbr+'][stepDur]"> <input type="button" value="Remove" onclick="removeArea('+areaNbr+');">';
        jQuery('#step-container').append(area);
    }

    function removeArea(areaNum) {
        jQuery('#area'+areaNum).remove();
    }
</script>
</head>
<body>
<form action="insertNewProduct.php" method="post">
    <fieldset id="product-fieldset">
        <legend>Produkt</legend>
        <div id="step-container">
            <input type="hidden" name="step[]" />
            <p id="area0">Bezeichnung: <input type="text" name="step[0][stepDescr]"> Dauer: <input type="text" name="step[0][stepDur]"> <input onclick="addArea(this.form);" type="button" value="Add Area" /> </p>
            </div>


        </div>
    </fieldset>
    <input type="submit" id="sendForm" value="Send"><input type="reset" id="resetForm" value="Reset">
</form>
</body>
</html>

【讨论】：

确实也是一个有用的答案！谢谢

【解决方案3】：

尝试使用 php 使用循环：

<html>
<head>
</head>
<body>
<form action="insertNewProduct.php" method="post">
    <fieldset id="product-fieldset">
        <legend>Produkt</legend>
        <div id="step-container">
            <input type="hidden" name="step[]" />
            <?php for($i=0;$i<2;$i++) { ?>
            <div id="step-table" class="product-table">
                <table id="basis-table">
                    <!-- STEP-BASISDATEN -->
                    <thead id="step-basis">
                        <!-- Basisdaten Schritt -->
                        <tr>
                            <th class="data-title">Arbeitsschritt</th>
                        </tr>
                        <tr>
                            <th>Bezeichnung:</th>
                            <td><input type="text" name="step[<?php echo $i; ?>][stepDescr]"></td>
                        </tr>
                        <tr>
                            <th>Dauer:</th>
                            <td><input type="text" name="step[<?php echo $i; ?>][stepDur]"></td>
                        </tr>
                    </thead>
                </table>
            </div>
            <?php } ?>                
        </div>
    </fieldset>
    <input type="submit" id="sendForm" value="Send"><input type="reset" id="resetForm" value="Reset">
</form>
</body>
</html>

【讨论】：

你的想法和上面的人一样。所以我的答案是一样的。