Dynamically create and process multiple form field groups

Question

I'm building a small order page (based on JS and PHP) and I'm a little stuck when it comes to how to process the form data. In the form the user should be able to order one or more products, each of which has a few settings in the form of radio buttons. To make every input field unique I added a small JS snippet that makes each input name value different (when adding a new product), like so -

    newUnit = newUnit.replace(/name="unitPrice/g, 'name="unitPrice' + i);
    newUnit = newUnit.replace(/name="body/g, 'name="body' + i);
    newUnit = newUnit.replace(/name="details/g, 'name="details' + i);
    newUnit = newUnit.replace(/name="topShelf/g, 'name="topShelf' + i);


<div class="unit">
    <input type="hidden" class="unitPrice" name="unitPrice" value="0" data-price="6900">
    <div class="row">
        <div class="col-sm-3">
            <fieldset class="form-group options-body">
                <legend>Body</legend>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body" value="White Ash" checked>
                        White Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body" value="Black Ash">
                        Black Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="800" name="body" value="Walnut">
                        Walnut (+800)
                    </label>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div class="unit">
    <input type="hidden" class="unitPrice" name="unitPrice" value="0" data-price="6900">
    <div class="row">
        <div class="col-sm-3">
            <fieldset class="form-group options-body">
                <legend>Body</legend>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body2" value="White Ash" checked>
                        White Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="0" name="body2" value="Black Ash">
                        Black Ash
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="form-check-input" data-price="800" name="body2" value="Walnut">
                        Walnut (+800)
                    </label>
                </div>
            </fieldset>
        </div>
    </div>
</div>

(sample markup if the user adds 1 more product, and parts of the JS that runs)

This works great for updating the prices and settings throughout the order steps but as I submit the data I'm unsure how to process the different products, as I can't loop them since they have different names. I bet there is a better approach for this, any ideas / directions?

Example of the form data

unitPrice=6900&unitPrice=6900&body%5B%5D=White%20Ash&details%5B%5D=Stainless%20steel&topShelf%5B%5D=Wood&firstName=&lastName=&email=&phone=&address=&city=&zip=&country=&firstName2=&lastName2=&email2=&phone2=&address2=&city2=&zip2=&country2=&totalPrice=13800

Answer 1

You should use arrays for form field names like unitPrice[] instead of "'unitPrice' + i" that you are doing now. You can then iterate the form fields in php as arrays eg $unitPrice = $_POST['unitPrice'] will give you an array of unit prices you can then iterate with a foreach. Does that make sense?

Answer 2

I'm not going to give a full code on how to do that but the explanation is quite enough. What you want to do is modify the Data being sent to the server before submitting. You can create 4 arrays for each field and just initialize them at client side with respective data (Note: Include empty values too to maintain the order.). Then send all of those arrays as a POST field. This can be done using AJAX query to handle the post. At the server side you can now iterate over each array separately. This is just one of the answer which might reduce the amount of POST variables if there is a limit set to it in your server (maybe 64 and user CAN go beyond that!).

Hope this helps. If you want a code version comment and I will spend some more time on it.

Answer 3

1) Maybe it is easier to use PHP to create the fields instead of JavaScript.

2) Just go through the names with a loop and store it e.g. to an array:

unitPrice = []; //create array
for($i = 0; $i < 10; $i++)
{
  array_push(unitPrice,$_GET['unitPrice'.$i]); //push value into array
}