Feedback:   mdelrosso@gmail.com  Follow @mdelrosso on Twitter @mdelrosso   Development:  Project on Github Project on Github  Report a bug Report a bug  HashTag on Twitter #sheepit

SheepIt! Plugin

Dynamic form cloning with Jquery

Nested forms Advanced controls Multiple forms in the same page Web designers friendly Pre-generated forms

What is SheepIt?

SheepIt is a jQuery plugin that allows you to clone form elements dynamically.
It is very useful to develop advanced forms that require the same type of load data multiple times.

For example, if you have a form as follows:
Formulario básico
In which a person's data is loaded (Name, Surname and Telephone), sheepIt can transform the phone into a multiform field dynamic so as to able the user load more than one phone per person.
Formulario con SheepIt

In addition, for ease of use, sheepIt added advanced controls that allow the user to modify the form dynamically adding or removing clones.
Controles avanzados

Features

  • Configuration options
    Limit the number of forms, Form controls customizable, number of initial forms, delete confirmation etc.
  • Advanced controls
    Add multiple forms at the same time, remove the last one and remove all are some of the advanced controls that sheepIt provides.
  • Web designers friendly
    SheepIt use the same template that the designer can see in your editor, easy to upgrade the design.
  • Data injection
    Thanks to inject method () API, sheepIt lets you load an array of data to the entire form, to an embedded clone form or to a specific clone.
    The method will perform all operations necessary to load the information provided, taking into account the existing clones and configurations.
  • Callback functions
    The callBack functions used to run custom codes before or after you add a clone to the form.
    So, for example, to set validation to forms cloned.
  • Nested forms
    A person has multiple addresses and an address may have multiple phones.
    Nested forms can handle such complex situations.
  • Pre-generated forms
    SheepIt can identify pre-generated clones at the html code and integrate them so as to handle them like the rest.
    This is very useful to interact with form frameworks as used in Symfony for PHP.
  • API to control the form from Javascript
    The plugin exposes a number of methods for controlling the form using Javascript in the same way that the user controls in your browser.

Requirements

Jquery V1.4+ Download

Basic demo

Include required files

            <script type="text/javascript" src="jquery-1.4.min.js"></script>
            <script type="text/javascript" src="jquery.sheepItPlugin-1.1.1.min.js"></script>            

Javascript code

            $(document).ready(function() {
                
                var sheepItForm = $('#sheepItForm').sheepIt({
                    separator: '',
                    allowRemoveLast: true,
                    allowRemoveCurrent: true,
                    allowRemoveAll: true,
                    allowAdd: true,
                    allowAddN: true,
                    maxFormsCount: 10,
                    minFormsCount: 0,
                    iniFormsCount: 2
                });
            
            });

HTML template

            <!-- sheepIt Form -->
            <div id="sheepItForm">
            
              <!-- Form template-->
              <div id="sheepItForm_template">
                <label for="sheepItForm_#index#_phone">Phone <span id="sheepItForm_label"></span></label>
                <input id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]" type="text"/>
                <a id="sheepItForm_remove_current">
                  <img class="delete" src="images/cross.png" width="16" height="16" border="0">
                </a>
              </div>
              <!-- /Form template-->
              
              <!-- No forms template -->
              <div id="sheepItForm_noforms_template">No phones</div>
              <!-- /No forms template-->
              
              <!-- Controls -->
              <div id="sheepItForm_controls">
                <div id="sheepItForm_add"><a><span>Add phone</span></a></div>
                <div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
                <div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
                <div id="sheepItForm_add_n">
                  <input id="sheepItForm_add_n_input" type="text" size="4" />
                  <div id="sheepItForm_add_n_button"><a><span>Add</span></a></div></div>
              </div>
              <!-- /Controls -->
              
            </div>
            <!-- /sheepIt Form -->            

Result

New person
Main data
No phones

Download the complete example

Download - example1.rar