arranging input data in POST-array

Question

I created a form that consists of an amount of similar areas. Those areas can be added using jQuery. Each area equals one workstep used to asemble a product and therefore it has the same input-fields (description, duration,...). Here is the code (it is simplified to two hard-coded areas):

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

As you can see, I added numbers to the steps

name="step[0][stepDescr]"

and therefore I get the desired result:

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

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

        )

)

If I don't use the numbers my array becomes of course unusable:

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

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

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

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

        )

)

How can I add these numbers (based on the amount of steps) to my HTML-Code (!) using jQuery?

You can use for() or foreach() loop in php and print this. — AnkiiG
– AnkiiG, Commented Jun 25, 2015 at 8:29
I don't want to re-arange and process the array using php. It's my aim to submit a fitting array. I think - if you have like 100 worksteps or even more - it becomes very complicated to change the array-order correctly once submitted. — kratsching
– kratsching, Commented Jun 25, 2015 at 8:33

icechair · Accepted Answer · 2015-06-25 10:54:02Z

1

You could use custom attributes. They are part of the HTML5 spec.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

The name for the input fields could be stored in a custom attribute:

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

And in your function to clone your fieldset construct the name based on the count of your step container. Be sure to change the ids of the elements to classes, as they aren't unique anymore if you clone them.

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

edited Jun 25, 2015 at 10:54

answered Jun 25, 2015 at 8:38

icechair

2954 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kratsching Over a year ago

thank you, that helped a lot. Can you give me some additional information about this "data-name"-thing?

PHPeter · Accepted Answer · 2015-06-25 09:25:29Z

1

I guess this should do the trick.

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

edited Jun 25, 2015 at 9:25

answered Jun 25, 2015 at 9:19

PHPeter

5776 silver badges19 bronze badges

1 Comment

kratsching Over a year ago

Indeed also a helpful answer! Thank you

AnkiiG · Accepted Answer · 2015-06-25 08:31:34Z

Try to use loop using 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>

You had the same idea like the person above. Therefore my answer is the same.

Collectives™ on Stack Overflow

arranging input data in POST-array

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related