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.

You May Also Like

4 thoughts on “jQuery Form Clone Plugin – Form Cloning in 6 easy steps

  1. Marcio says:

    Hi,
    how can I make an event to get the id of the input only created in this array ? Example : I will create dynamic fields when entering the zipCode returns me the address , however I have to identify which field I am typing to not change the address of every field ” address” .
    tks

    • Hello Marcio,

      If you post some of your working code then it will make your problem more clear. Mean while, I will suggest the following fix.

      1. First of all you have unique id for each input which carry a similar input number like ‘zipcode_#index#’ will convert to ‘zipcode_0’ in first row while the address will have ‘address_0’ id in the same row

      2. Now add onchange event to all the zipcode inputs which trigger a function like onchange=”updateAddress(#index#)”

      3. Now that you know the index number of the zip code input, you can get the zip code from that input and then update the address bearing the same index number. a sample function could be like this:

      function updateAddress(index) {
      var zipCode = $(‘#zipCode_’+index).value();
      //then do the necessary comparison for address and update the address field like this

      $(‘#addrss_’+index). //your remaining code here

      }

      I hope you get the idea, ‘Index Format’ will give all the fields unique id, and form clone will give numerical value to all the occurrences of index format which is “#index”

    • There can be an easy solution to this, Write a custom function which should be use the sheepit API to add a form. Associate it with a click event of a button in the form, so instead of using the native id=”form_clone_add” to add form, you will use your onclick function to add form.

      Doing this will give you more control on when to add form. You can get the count of forms through getFormsCount() API in that function and based on its value, you can change the visibility of the fields. For adding form use addForm() or addNForms(2)

Leave a Reply