create and submit dynamic forms

Question

I want to develop a webpage wich dynamically adds and removes particular webforms (all webforms with the same structure) on the page (when pressing add and remove buttons). Adding and removing the webforms already works in the code below (using a jquery function), but I still struggle to create the related unique name values when submitting more forms. My idea is: - to put all forms in an array (forms() )- each with unique name values - ...and maintain in a array (formsavailable()) which forms have been added/used and which have been removed.

I already added the code (below) to maintain formsavailable() when adding forms. But I dont know how to code formsavailable() for removing forms.

Any ideas? Or are there simpler ways for creating the unique name value's with the described context?

Please your comments.

Thank you.

The code:

<script>
    var forms = Array();
    var formsavailable = Array();

    forms = getProductconfigforms(); //create a list of strings with the product forms

    var NUMBER_OF_FORMS = 5;

    for (var i=1; i<=NUMBER_OF_FORMS;i++)
    {
            formsavailable[i] = true; //at the start all forms are
    }


        //script for adding and removing productss
        $(document).ready (function () {
            var i;
            $('.btnAdd').click (function () {
                i = formsavailable.indexOf(true);       
                $('.buttons').append(forms[i]); // end append
                formsavailable[i] = false;

                $('div .btnRemove').last().click (function () { 
                    $(this).parent().last().remove();    
                }); // end click
            }); // end click                

        }); // end ready
    </script>




</head>

<body>
<h2> text here </h2>
<div class="buttons">
<input type="button" class="btnAdd" value="Add"><br>         
</div>
<p> tekst </p>

<input type="button" value="Terug naar stap 1" onclick="goBack()">

</body>

Why do the forms need different names? The form names are not submitted. — Bergi, Jul 02 '13 at 15:58

score 1 · Accepted Answer · answered Jul 02 '13 at 16:01

1

You actually don't need to make a unique index or unique name. The HTTP protocol supports sending multiple data points with the same name.

For example, this is totally fine: &name=me&name=you&name=them&name=her. On the back end, depending on which framework and language you are using, you simply get an array.

So in your form, you can use

<label> Product 1 <input name="product_name" type="text" /></label>
<label> Product 2 <input name="product_name" type="text" /></label>
...

And so on, until you've added however many forms you wish. When you submit the form, your page will automatically take care of sending them on to your backend form, where you can parse out each form programmatically.

answered Jul 02 '13 at 16:01

Jordan

31,971
6
56
67

Hi, thanks for your answer. How do you parse them out then? (I use PHP). I didn't know that's possible and from the answer at http://stackoverflow.com/questions/2203430/posting-form-fields-with-same-name-attribute I get the impression it IS not possible (?) – Joppo Jul 02 '13 at 16:14
In that case, you simply need to give it a name like product_name[] instead of product_name. PHP is strange that way. Then inside of PHP you can access them like any other array. `$products = $_POST['product_name'];` – Jordan Jul 02 '13 at 16:16
ps: I noticed one remarkeble aspect when including a checkbox for each Product item: when you define an array for the checkboxes (like $product_selection = $_POST['productselection'];) all checked elements are put in the array first (???) – Joppo Jul 05 '13 at 20:29

create and submit dynamic forms

1 Answers1