Question

我创建了一个由大量类似区域组成的表单。可以使用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代码（！）中？

Answer 1

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

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

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

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

在您的函数中克隆您的fieldset构造基于步骤容器计数的名称。请务必将元素的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");
};

Answer 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>

Answer 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>

在POST数组中安排输入数据

3 个答案: