Giter VIP home page Giter VIP logo

add-another's Introduction

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
  • minimum - The minimum number of items that can exist in the group. Default 1. This affects the "remove" functionality only, and does not trigger auto-add on load.
  • 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 as a selector. (Should not begin with a period)
  • removeSelector - If you are inserting your own remove links into the DOM, this selector lets you apply behavior to them.
  • addLinkText - The text innerHTML of the add another link, or false to prevent the link from being added (use)
  • addLinkClass - The class of the add another link. (Should not begin with a period.) (By default, add-another-x where .x appears in selector used to indicate what will be duplicated.)
  • addLinkSelector - Adds the same behavior as the link created by addLinkText/addLinkClass to the element(s), if any, specified by this string. Note this is necessary if addLinkText is false then this does not need to be a class; rather it can be any jQuery-supported selector, such as "#foo .bar:last".
  • 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 false by default, and it can cause problems if you repeat sections server-side as well in the current implementation.
    (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.

add-another's People

Contributors

alanhogan avatar jeremeamia avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.