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
– Bergi, Commented Jul 2, 2013 at 15:58

Jordan · Accepted Answer · 2013-07-02 16:01:15Z

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 2, 2013 at 16:01

Jordan

32.7k6 gold badges59 silver badges67 bronze badges

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

3 Comments

Joppo Over a year ago

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 stackoverflow.com/questions/2203430/… I get the impression it IS not possible (?)

Jordan Over a year ago

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'];

Joppo Over a year ago

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 (???)

Collectives™ on Stack Overflow

create and submit dynamic forms

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related