Question

I would like to create a simple form with form field/component duplication feature.

I searched all over the web. But i couldn’t find any proper tutorial.

For example my form fields contains the following.

1. Title
2. Email

3a. Image Name 
3b. Image Description
3c. Image file

3a,3b,3c are a group here. So lets call it as “image group”.
I would like to have a duplicate link below that group where my users click it and duplicate as many as they want.

Here is an example of what i’m asking.
Ps: I dont want to use jformer. Because it loads all the script and it taking to much time to load the page. Thats why i’m asking this question.

Thanks

Answer 1

All you need to do is write a JavaScript function that will append a new set of form elements to a given container. Something like this:

<div id="imageforms">
    <fieldset id="firstimage">
       <input type="text" name="imagenames[]" />
       <textarea name="imagedescriptions[]"></textarea>
       <input type="file" name="imagefiles[]" />
    </fieldset>
</div>
<a href="#" onclick="addAdditionalImage(); return false;">add another image</a>

And then you need the JavaScript function:

 function addAdditionalImage() {
      $('#imageforms').append($('#firstimage').clone());
 }

The most interesting part here is the usage of name="xxx[]" which tells PHP to create an array from the form values.