https://github.com/sutara79/jquery.add-input-area
jQuery plug-in. You can add or delete the list of input area.
https://github.com/sutara79/jquery.add-input-area
html-form jquery-plugin
Last synced: 10 months ago
JSON representation
jQuery plug-in. You can add or delete the list of input area.
- Host: GitHub
- URL: https://github.com/sutara79/jquery.add-input-area
- Owner: sutara79
- Created: 2012-05-10T08:09:32.000Z (about 14 years ago)
- Default Branch: master
- Last Pushed: 2018-09-03T03:42:20.000Z (almost 8 years ago)
- Last Synced: 2025-09-10T08:51:25.509Z (10 months ago)
- Topics: html-form, jquery-plugin
- Language: HTML
- Homepage: https://sutara79.github.io/jquery.add-input-area/
- Size: 888 KB
- Stars: 48
- Watchers: 9
- Forks: 25
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# jquery.add-input-area
[](https://www.npmjs.com/package/jquery.add-input-area)
[](https://travis-ci.org/sutara79/jquery.add-input-area)
jQuery plugin to add or delete form fields.
## 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
-
Delete
```
###### 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)
(add)
```
You can use original naming convention by setting custom data attribute, "data-name-format" or "data-id-format".
``` html
(default)
(add)
```
```html
(default)
(add)
```
- 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)
( )