🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jQuery plug-in. You can add or delete the list of input area.

Forms Plugins

Documentation

jquery.add-input-area

npm version Build Status

jQuery plugin to add or delete form fields.

Sample image

Demo

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

Install

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]">

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 ( [email protected] )


You May Also Like