jquery.add-input-area

jQuery plugin to add or delete form fields.

Demo

https://sutara79.github.io/jquery.add-input-area/

Install

• GitHub: Clone or download.
• npm: npm i jquery.add-input-area
• CDN (jsDelivr):
  • jquery.add-input-area.min.js (v4.11.0)

Usage

HTML

<ol id="list"><!-- "id" attribute is required -->
  <li class="list_var"><!-- .(id)_var -->
    <input type="text" name="list_0" id="list_0">
    <button class="list_del">Delete</button><!-- .(id)_del -->
  </li>
</ol>
<input type="button" value="Add" class="list_add"><!-- .(id)_add -->
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery.add-input-area.min.js"></script>

JavaScript

$('#list').addInputArea();

Naming convention

• CSS class for the wrapper of form fields: .(id)_var
• CSS class for del-button: .(id)_del
• CSS class for add-button: .(id)_add

You can change these rules above by options. (area_var, btn_add, btn_del)

• Form field: (a text)_0

If you follow this rule, "name", "id" and "for" attribute are numbered automatically.

(default)
<input type="text" name="foo_0">
 
(add)
<input type="text" name="foo_1">
<input type="text" name="foo_2">
<input type="text" name="foo_3">

You can use original naming convention by setting custom data attribute, "data-name-format" or "data-id-format".

(default)
<input type="text" data-name-format="foo_%d_bar" name="foo_0_bar">
 
(add)
<input type="text" data-name-format="foo_%d_bar" name="foo_1_bar">
<input type="text" data-name-format="foo_%d_bar" name="foo_2_bar">

(default)
<input type="text" data-name-format="data[posts][mail][%d]" name="data[posts][mail][0]">
 
(add)
<input type="text" data-name-format="data[posts][mail][%d]" name="data[posts][mail][1]">
<input type="text" data-name-format="data[posts][mail][%d]" name="data[posts][mail][2]">

• See How to use on CakePHP (jquery.add-input-area v4.7.1, CakePHP v2.3.8)

Options

Name	Type	Default	Description
area_var	string	'.(id)_var'	CSS class for the wrapper of form fields.
btn_add	string	'.(id)_add'	CSS class for add button.
btn_del	string	'.(id)_del'	CSS class for delete button.
area_del	string	(btn_del)	CSS class for wrapper of delete button.
after_add	function	null	A callback function to be called after adding.
clone_event	boolean	true	If event will be copied or not.
maximum	number	0	Max number of wrapper of form fields. "0" means unlimited.
dont_clone	string	null	CSS selector to avoid cloning.
validate	function	null	Validation before adding. Should return boolean. If false, adding stops.

License

MIT

Author

Yuusaku Miyazaki ( [e-mail] )