sutara79 / jquery.add-input-area

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

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

jquery.add-input-area's Issues

Renumbering for="" attributes does not work

I had to replace the 'id' on line 218 for make for="" renumbering work. Your own sample with <label> do not work /jquery.add-input-area/demo/options/

 // Rename "for" attribute.
      .find('[for]').each(function() {
        $(this).attr('for', self._getValOfAttr(this, idx, 'for'));
});

Thanks for this very useful tool!

Prevent alert on pressing enter

First, thank you for sharing this, real time saver:)

Far from jQuery script guru... so please forgive me if missing simple solution. Having problem removing the popup alert that appears when user presses "Enter" while in input area.

Ideally another row of input is added, but simply removing the alert is good enough, If it helps, using based off the "Not to initialize".

Thank you!

Eng comments

Hi!
Can u share version with comments on eng? I just learn JS and JQuery, comments are very useful.

Multiple tag

Hi, this script awesome. How about for using addInputArea() in multiple tag in one page ?

Bootstrap prevents correct behavior if there's a span inside the delete button

If Bootstrap CSS is used, AND a span is used inside the delete button tag (for instance to use an icon on the button), then all delete buttons always remove the last input added. Expected behavior is to remove the input associated with that specific delete button.

Here is a codepen showing with and without spans on the buttons. Remove Bootstrap from the pen to see that both examples work without Bootstrap.

codepen

Not a huge deal as there are plenty of good options to replace icon fonts on buttons, or replace Bootstrap for that matter. I just found it and figured I should make a record in case it helps someone else who is struggling with this.

And also ... thank you for this incredibly handy plugin! :)

Don't clone some elements at startup

I needed a way to preview already uploaded files (with <input type=file>), but obviously omit the preview tags for the new elements created when adding a row of new inputs. In order to do that, I added a dont-clone class to those elements, triggering detach() (see lines 59-60 below). I didn't add configuration settings for that though...

 57   // Save original
 58   this.option.original = $(this.elem).find(this.option.area_var).eq(0).clone(this.option.clone_event);
 59   // Remove dont-clone elements
 60   $(this.option.original).find('.dont-clone').detach();

Prevent for empty value input

How to prevent for form input still empty ?

edit mode

Hello, @sutara79 !

Thx for add-input-area plugin!
What would be the best way to use it in the edit mode ?