Skip to content

sutara79/jquery.add-input-area

Repository files navigation

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 ( toumin.m7@gmail.com )