# jquery.add-input-area

> jQuery plugin to add or delete form fields.

Latest version **4.11.0** (published 2018-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery.add-input-area
pnpm add jquery.add-input-area
yarn add jquery.add-input-area
bun add jquery.add-input-area
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.11.0 |
| Published | 2018-07-23 |
| First published | 2017-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 25.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 48 |
| Author | Yuusaku Miyazaki |
| Maintainers | sutara79 |
| Keywords | jquery-plugin, form |

## Links

- npm: https://www.npmjs.com/package/jquery.add-input-area
- Repository: https://github.com/sutara79/jquery.add-input-area
- Issues: https://github.com/sutara79/jquery.add-input-area/issues
- npm.io page: https://npm.io/package/jquery.add-input-area

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) ^3.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.11.0 (latest) — 2018-07-23
- 4.10.1 — 2018-07-22
- 4.10.0 — 2018-07-21
- 4.9.4 — 2018-07-20
- 4.9.3 — 2018-07-16
- 4.9.2 — 2017-10-29
- 4.9.1 — 2017-05-04
- 4.9.0 — 2017-05-03

## README

# jquery.add-input-area

[![npm version](https://img.shields.io/npm/v/jquery.add-input-area.svg)](https://www.npmjs.com/package/jquery.add-input-area)
[![Build Status](https://travis-ci.org/sutara79/jquery.add-input-area.svg?branch=master)](https://travis-ci.org/sutara79/jquery.add-input-area)

jQuery plugin to add or delete form fields.

![Sample image](demo/image.png)


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


## Install
- [GitHub](https://github.com/sutara79/jquery.add-input-area): Clone or download.
- [npm](https://www.npmjs.com/package/jquery.add-input-area): `npm i jquery.add-input-area`
- CDN [(jsDelivr)](https://www.jsdelivr.com/):
    - [jquery.add-input-area.min.js (v4.11.0)](https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.11.0/dist/jquery.add-input-area.min.js)


## Usage

###### HTML
```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
```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.

```html
(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".

``` html
(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">
```

```html
(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)](http://code.runnable.com/U7vCAlCwvQZzFZBO/how-to-use-jquery-add-input-area-on-cakephp)


## Options
|Name                                                                     |Type    |Default    |Description                                   |
|-------------------------------------------------------------------------|--------|-----------|----------------------------------------------|
|[area_var](https://sutara79.github.io/jquery.add-input-area/#index_02)   |string  |'.(id)_var'|CSS class for the wrapper of form fields.     |
|[btn_add](https://sutara79.github.io/jquery.add-input-area/#index_02)    |string  |'.(id)_add'|CSS class for add button.                     |
|[btn_del](https://sutara79.github.io/jquery.add-input-area/#index_02)    |string  |'.(id)_del'|CSS class for delete button.                  |
|[area\_del](https://sutara79.github.io/jquery.add-input-area/#index_04)  |string  |(btn_del)  |CSS class for wrapper of delete button.       |
|[after_add](https://sutara79.github.io/jquery.add-input-area/#index_10)  |function|null       |A callback function to be called after adding.|
|[clone_event](https://sutara79.github.io/jquery.add-input-area/#index_11)|boolean |true       |If event will be copied or not.               |
|[maximum](https://sutara79.github.io/jquery.add-input-area/#index_05)    |number  |0          |Max number of wrapper of form fields. "0" means unlimited.|
|[dont_clone](https://sutara79.github.io/jquery.add-input-area/#index_12)    |string  |null       |CSS selector to avoid cloning.|
|[validate](https://sutara79.github.io/jquery.add-input-area/#index_13)    |function  |null       |Validation before adding. Should return boolean. If false, adding stops.|


## License
[MIT](https://www.opensource.org/licenses/mit-license.php)


## Author
[Yuusaku Miyazaki](http://d.hatena.ne.jp/sutara_lumpur/20120509/1336556562)
( <toumin.m7@gmail.com> )

---
_Source: https://npm.io/package/jquery.add-input-area · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._