jQuery Form Clone Plugin – Form Cloning in 6 easy steps

jquery form clone

For this tutorial, we will be using SheepIt jQuery Form Clone Plugin. We will create a form and will then add the necessary JavaScript. You can check the Demo Here. Following are the steps:

1. Adding jQuery Form Clone Plugin:

First of all download the sheepIt Form Clone Plugin from here . Include it in your HTML after including jQuery as follow.

After adding the plugin, we will create the form template.

2. Creating Form Template:

Form template consists of 3 main parts identified by id attribute. All these parts are wrapped inside a main div.

  1. Form Template
  2. No Form Template
  3. Form Controls

First of all create your <form> tag and add all those elements which need not to be cloned.

Now add a <div> inside that form tag. Remember, your form clone template needs to be inside the <form> tag else it will not get submitted.If the form element is wrapped in the template div then whole form will be cloned which can result in multiple form clones instead of single form with cloned elements. After creating the div, identify it by id=form_clone“.

3. Form Template

Form template will resides inside the form_clone (Our main wrapper div). It consist of a wrapper div identified by an id suffixed with _template which in our case will be form_clone_template. All the form elements which are required to be cloned will reside inside this div. After adding a single <input> tag and its <label>, your code will become like this.

On inspecting the above code, you can see multiple id’s inside the form_clone_template associated with different tags. These id’s are used by SheepIt jQuery Form Clone Plugin to index them. So that when we clone the form, the plugin will auto increment the index and will add them dynamically to the page. Let’s explain the id STUFF.

Index Format

#index# is the default index format of the plugin. When page is loaded, it will be replaced by 0 (zero) for the first row of input element and as we continue to add forms, it will get incremented and will be added anywhere where the index format is specified.

Label

Looking at the first tag viz label, we have for attribute as “form_clone_#index#_websites”. If you look at the input tag, you will find that its id follow the same pattern. With index format (#index#) inside it, the label is made sure to work only for its own input field.

Inside the <label> tag you will see an empty <span> tag. This tag is intended to show the index number as the form is cloned. E.g in our case it will be URL 1, URL 2, URL 3 and so on…

Input

Input field holds two important attributes. Id and Name. Id has already been explained. The name pattern is important. As the cloned input field will bear same name for all row, we need to submit the data to server as an array. For that array to work, we use name attribute like name=”someName[ ]” which in our case is name=”websites[#index#]”. Name of the input field followed by a square bracket will turn the field to be submitted as array. Index format inside the brackets will give a unique key to every array element and hence will prevent loss of data by input fields sharing same key. Data submitted by such input fields looks somewhat like this.

4. No Form Template:

This template is shown when there are no input fields. It can happen if the user deletes all the cloned form elements or if you ask the form clone plugin to not show any form on page load initially. It is wrapped inside a div bearing an id=”form_clone_noforms_template”. You can add any customized message inside it and can use normal HTML and CSS to decorate it. Add it after the form template.

5. Form Controls:

These are sets of controls which can be used to clone/delete any number of input fields. For Sake of simplicity, I’ll just explain 3 of them. Create a div wrapper for the controls. Give it an id=”form_clone_controls”.  Now add three tags of any type inside it. You can use either buttons or div or any other tag as long as it bears the required ids. Here is your complete form with form clone template.

Control ids are pretty self explanatory. Now as we have completed the form clone template, let’s power up the jQuery Form Clone Plugin.

6. Powering Up The Form Clone Plugin:

Just include the  following JavaScript code snippet to your page. You can add them after you include the required jQuery core file and SheepIt jQuery Form Clone Plugin.

That’s it. You can find a working DEMO HERE. Besides to avoid any error when cloning the form, follow these tips:

  1. Watch for ids very carefully as this jQuery form clone plugin is totally dependent on it
  2. Avoid mistakes in index format. e.g #index, #INDEX#, index etc are neither same nor gonna work unless you specify them.
  3. This form clone plugin clone the form after DOM has loaded. So any validation on the cloned input fields will not work unless specified after their creation.

This was just a quick and brief tutorial about sheepIt jQuery Form Clone plugin. More posts will be coming soon explaining the api and nested form techniques . So stay tuned. For any suggestion or comments please let me know by comments.