Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A jQuery plugin that grants the ability for duplicating HTML content. This is useful for constructing repeated form elements like a multiple file uploader.
branch: master

README.markdown

AddAnother jQuery Plugin

A jQuery plugin for easily creating repeating HTML elements where the user can "Add another". This is especially good for repeating form input structures like multiple file uploaders.

Credits

Author: Jeremy Lindblom <http://webdevilaz.com>

Contributor: Alan Hogan <http://alanhogan.com>

Note: This is a fork of relCopy by Andres Vidal <http://www.andresvidal.com/labs/relcopy.html>

Settings

  • limit - The number of items that can exist in the group. 0 = unlimited
  • excludeSelector - Elements with this class will not be cloned
  • emptySelector - Elements with this class will have subelements removed
  • clearInputs - If true, then cloned input fields will have an empty value
  • animate - If true, show/hide funcion are used with animation
  • allowRemove - If true, then a remove link will be added automatically
  • removeClass - The class of the remove link
  • addLinkText - The text of the add another link
  • addLinkClass - The class of the add another link (by default, add-another-x where .x appears in selector used to indicate what will be duplicated.)
  • removeLinkText - The text of the remove link
  • onFull - A callback to be executed after an item is added and the group is full
  • onNotFull - A callback to be executed after an item is added and the group is NOT full
  • onRemove - A callback to be executed after an item is removed
  • explicitBracketNumbering - Attempts to smartly set names that ended in
    [] or [0] to end in
    [0], [1], [2]… and names that ended in
    [0][foo] to
    [0][foo], [1][foo], [2][foo]…, respectively.
    This is true by default.
    (Don't worry, copied elements' id attributes and corresponding for attributes are appended with _1, _2, … regardless.)

Usage

In order to use AddAnother you must first include jQuery and the addAnother.jquery.js script in your page. Then create a chunk of HTML you would like to be able to replicate, and give it a class. Then add some javascript:

$('.the-class-of-the-html-chunk').addAnother({...});

where "…" is the options. You can have more than one AddAnother on one page. AddAnother does not automatically add brackets to your HTML names, so you must do this yourself if you plan on using the posted data as an array. Take a look at the examples for more details.

Something went wrong with that request. Please try again.