Simple jQuery plugin for cloning inputs as they are filled in
Pull request Compare This branch is 15 commits ahead, 7 commits behind OscarGodson:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

jQuery Endless Inputs Plugin


This plugin gives you an endless stream of automatically appearing inputs.

Checkout demo.html for an example.


Suppose you have this markup:

<ul class='endless'>
  <li class='endlessItem'><input/></li>

And this call to the plugin:


The plugin will clone that <li> element each time something is entered into its <input/>. Check out demo.html a more complex example.


This plugin allows you to keep on chaining, so, for example:

$('#myelement').endlessInputs().css({border:'1px solid blue'});

Would run endlessInputs on #myelement then add a blue border to it after.


The following options can be provided like so (default values specified):

    // this is the inner element, within '.yourSelector' that will be cloned and
    // appended to '.yourSelector'. If '.yourSelector' is a table, this should be a row
    elementToCloneSelector: '.endlessItem',

    // this selector is applied to the last item matched by 'ElementToCloneSelector'. 
    // If anything matches, it is cloned
    doCloneElementPredicate: 'input[value!=""],textarea[value!=""],select[selectedIndex!=0]',

    // Anything with this class will be removed from the newly cloned element before it is 
    // appended to '.yourSelector'
    elementsToSkipSelector: '.endlessSkip',

    // These are the elements to clear out before the newly cloned element is 
    // appended to '.yourSelector'
    elementsToClearOnCloneSelector: 'textarea,input,select',

    // This is simply passed to jQuery's .clone() command. Set to true to also clone
    // event handlers. More about what this means here:
    cloneWithDataAndEvents: false,

    // Set the max number of elements, including the initial element. e.g. if you set this to 5,
    // and you already have 3 items in your container, the plugin will add at most 2 more
    // Set maxElementCount <= 0 for unlimited cloning fun (default behavior)
    maxElementCount: 0

How do I access these dynamic inputs from the server?


If you give each input a name ending in brackets, [], all the values will be submitted and PHP will turn turn them into an array. For example, consider this form (src):

enter data

When submitted, PHP sees this:

    [li-input] => Array
            [0] => Value1
            [1] => Value2
            [2] => Value3
            [3] => 

    [table-input] => Array
            [0] => Bar1
            [1] => Bar2
            [2] => Bar3
            [3] => 

    [table-select] => Array
            [0] => hi!
            [1] => 
            [2] => hi!
            [3] => 


TODO (for shame!)

How do I prepopulate values to the screen from the server?


TODO (for shame!)


TODO (for shame!)

Whats next?

The world!

Found a bug?

Submit a bug report above or here

Or find ping me on Twitter or on my blog