Skip to content

Commit 8bbc94c

Browse files
author
Kurtis LoVerde
committed
Release 1.0
0 parents  commit 8bbc94c

File tree

11 files changed

+577
-0
lines changed

11 files changed

+577
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Release 1.0 (August 27, 2016)
2+
3+
* First release

‎LICENSE‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
Copyright (c) 2016, Kurtis LoVerde
2+
All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without
5+
modification, are permitted provided that the following conditions are met:
6+
7+
1. Redistributions of source code must retain the above copyright
8+
notice, this list of conditions and the following disclaimer.
9+
2. Redistributions in binary form must reproduce the above copyright
10+
notice, this list of conditions and the following disclaimer in the
11+
documentation and/or other materials provided with the distribution.
12+
3. Neither the name of the copyright holder nor the names of its
13+
contributors may be used to endorse or promote products derived from
14+
this software without specific prior written permission.
15+
16+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
17+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
18+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
AddRemoveTextbox v1.0
2+
=====================
3+
4+
See LICENSE for this software's licensing terms.
5+
6+
AddRemoveTextbox is a jQuery plugin which provides for dynamic creation and removal of input fields, accomplished by clicking add/remove buttons which appear to the right of each field.
7+
8+
9+
## Features
10+
11+
* Supports all text-based input types ('text', 'number', etc), plus the 'color' type
12+
* Configurable CSS classes for the 'add' and 'remove' buttons
13+
* Configurable tooltips for the 'add' and 'remove' buttons
14+
* Configurable limit on the number of input fields
15+
16+
17+
## jQuery Compatibility
18+
19+
Known to be compatible with the following versions of jQuery (other versions are untested):
20+
21+
* 3.1.0
22+
* 2.2.4
23+
* 1.12.4
24+
25+
26+
## Browser Compatibility
27+
28+
Known to be compatible with the following browser versions (other brands/versions are untested):
29+
30+
* Firefox 48
31+
* Chrome 52.0.2743.116 m
32+
* Edge 20.10240.16384.0
33+
* IE 11
34+
* IE 10
35+
* IE 9
36+
* IE 8 (when used with an IE 8-compatible version of jQuery: v1.12.4 was the last version for IE 8)
37+
38+
39+
## Initialization
40+
41+
You need to provide a container for all of the input fields. Within that container, you need to provide a container for each set of input field plus buttons. This second container must be the input field's immediate parent.
42+
43+
The plugin will duplicate the input field's immediate parent when creating a new field, so you should't define an ID attribute for the container.
44+
45+
You should provide and `id` and `name` attribute for your field(s), and they should be the same value.
46+
47+
```html
48+
49+
<div id="myTextBoxes">
50+
<div class="txtBoxRow">
51+
<input type="text" id="txt0" name="txt0"/>
52+
</div>
53+
</div>
54+
55+
```
56+
57+
```javascript
58+
59+
$( "#txt0" ).addRemoveTextbox( {
60+
addButtonClass : "addRemoveButton imgAdd",
61+
addButtonTooltip : "Add",
62+
removeButtonClass : "addRemoveButton imgRemove",
63+
removeButtonTooltip : "Remove"
64+
} );
65+
66+
```
67+
AddRemoveTextbox also understands array notation, so you could use `id=&quot;txt[0]&quot;`.
68+
69+
You can also initialize AddRemoveTextbox on a large preexisting group of text boxes.
70+
71+
See the included HTML file for more in-depth examples.
72+
73+
74+
## Configuration Options
75+
76+
| Property | Description | Default Value |
77+
| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |---------------|
78+
| `addButtonClass` | A CSS class to style the 'Add' button. The generated HTML will be a &lt;&gt;, so it is assumed that you will use CSS to define a background image. | addButton |
79+
| `addButtonTooltip` | Hover text for the 'Add' button | null |
80+
| `removeButtonClass` | A CSS class to style the 'Remove' button. The generated HTML will be a &lt;&gt;, so it is assumed that you will use CSS to define background image. | removeButton |
81+
| `removeButtonTooltip` | Hover text for the 'Remove' button | null |
82+
| `maxFields` | A optional limit on the number of fields which may exist under the applicable ID prefix. If a value is specified, it must be an integer greater than 1. | null (no limit) |
83+
84+
85+
## Thanks
86+
87+
Do you like this library? Want to toss a few bucks my way to say thanks? I accept donations at https://paypal.me/KurtisLoVerde/5. Thank you for your support!

‎demo/css/demo.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* AddRemoveTextbox v1.0
3+
* https://www.github.com/kloverde/jquery-AddRemoveTextbox
4+
*
5+
* This software is licensed under the 3-clause BSD license.
6+
*
7+
* Copyright (c) 2016 Kurtis LoVerde
8+
* All rights reserved
9+
*
10+
* Donations: https://paypal.me/KurtisLoVerde/5
11+
*/
12+
13+
.txtBoxRow {
14+
margin-bottom: 10px;
15+
}
16+
17+
.txtBoxRow input {
18+
vertical-align: middle;
19+
}
20+
21+
.txtBoxRow input.border1 {
22+
border: 1px solid orange;
23+
}
24+
25+
.txtBoxRow .addRemoveButton {
26+
display: inline-block;
27+
width: 17px;
28+
height: 17px;
29+
margin-left: 5px;
30+
vertical-align: middle;
31+
}
32+
33+
.txtBoxRow .addRemoveButton:hover {
34+
cursor: pointer;
35+
}
36+
37+
.txtBoxRow .imgAdd {
38+
background: url( '../img/add-inactive.png' );
39+
}
40+
41+
.txtBoxRow .imgAdd:hover {
42+
background: url( '../img/add-active.png' );
43+
}
44+
45+
.txtBoxRow .imgRemove {
46+
background: url( '../img/remove-inactive.png' );
47+
}
48+
49+
.txtBoxRow .imgRemove:hover {
50+
background: url( '../img/remove-active.png' );
51+
}

‎demo/demo.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
AddRemoveTextbox v1.0
5+
https://www.github.com/kloverde/jquery-AddRemoveTextbox
6+
7+
Copyright (c) 2016 Kurtis LoVerde
8+
All rights reserved
9+
10+
Donations: https://paypal.me/KurtisLoVerde/5
11+
-->
12+
13+
<html lang="en-US">
14+
<head>
15+
<meta charset="utf-8"/>
16+
17+
<title>AddRemoveTextbox Demo</title>
18+
19+
<link rel="stylesheet" href="css/demo.css"/>
20+
21+
<style type="text/css">
22+
h3 {
23+
margin-top: 35px;
24+
}
25+
</style>
26+
27+
<script
28+
src="https://code.jquery.com/jquery-3.1.0.min.js"
29+
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
30+
crossorigin="anonymous"></script>
31+
32+
<script type="text/javascript" src="../jquery.addremovetextbox.js"></script>
33+
34+
<script type="text/javascript">
35+
$( document ).ready( function() {
36+
// Example 1
37+
38+
$( "#txt\\[0\\]" ).addRemoveTextbox( {
39+
addButtonClass : "addRemoveButton imgAdd",
40+
addButtonTooltip : "Add",
41+
removeButtonClass : "addRemoveButton imgRemove",
42+
removeButtonTooltip : "Remove"
43+
} );
44+
45+
// Example 2
46+
47+
$( "#number3" ).addRemoveTextbox( {
48+
addButtonClass : "addRemoveButton imgAdd",
49+
addButtonTooltip : "Add",
50+
removeButtonClass : "addRemoveButton imgRemove",
51+
removeButtonTooltip : "Remove"
52+
} );
53+
54+
// Example 3
55+
56+
$( "#color0" ).addRemoveTextbox( {
57+
addButtonClass : "addRemoveButton imgAdd",
58+
addButtonTooltip : "Add",
59+
removeButtonClass : "addRemoveButton imgRemove",
60+
removeButtonTooltip : "Remove"
61+
} );
62+
63+
// Example 4
64+
65+
$( "#stuff1" ).addRemoveTextbox( {
66+
addButtonClass : "addRemoveButton imgAdd",
67+
addButtonTooltip : "Add",
68+
removeButtonClass : "addRemoveButton imgRemove",
69+
removeButtonTooltip : "Remove"
70+
} );
71+
72+
// Example 5
73+
74+
$( "#maxFields1" ).addRemoveTextbox( {
75+
addButtonClass : "addRemoveButton imgAdd",
76+
removeButtonClass : "addRemoveButton imgRemove",
77+
maxFields : 3
78+
} );
79+
} );
80+
</script>
81+
</head>
82+
83+
<body>
84+
<p>
85+
Notes:
86+
87+
<ol>
88+
<li>You must have an Internet connection to use this demo, as jQuery is pulled from the jQuery CDN.</li>
89+
<li>Depending on your browser's support for specialized input types, you might not see specialized behavior, and might see standard text boxes instead. The ones featured here are known to work in Firefox 48 and Chrome 52.</li>
90+
</ol>
91+
</p>
92+
93+
<h3>Example 2 - ID array notation: &lt;input type=&quot;text&quot; id=&quot;txt[0]&quot;&gt;</h3>
94+
95+
<div id="example1">
96+
<div class="txtBoxRow">
97+
<input type="text" id="txt[0]" name="txt[0]" class="addRemoveBox border1" maxlength="10"/>
98+
</div>
99+
</div>
100+
101+
<h3>Example 2 - ID number notation: &lt;input type=&quot;number&quot; id=&quot;number3&quot;&gt;</h3>
102+
<p>The ID starts on 3, so the next generated ID will be 4</p>
103+
104+
<div id="example2">
105+
<div class="txtBoxRow">
106+
<input type="number" id="number3" name="number3" class="addRemoveBox border1" min="1" max="7"/>
107+
</div>
108+
</div>
109+
110+
<h3>Example 3: &lt;input type=&quot;color&quot; id=&quot;color0&quot;&gt;</h3>
111+
<p>
112+
If your browser supports it, you'll see a color picker here instead of a text field.
113+
AddRemoveTextbox supports this type, too!
114+
</p>
115+
116+
<div id="example3">
117+
<div class="txtBoxRow">
118+
<input type="color" id="color0" name="color0" class="addRemoveBox" value="#ff0000"/>
119+
</div>
120+
</div>
121+
122+
<h3>Example 4: Pre-existing fields, IDs out of order and with gaps</h3>
123+
<p>
124+
In this example, a set of preexisting input fields are registered. You don't need
125+
to do anything differently to register the set: simply invoke AddRemoveTextbox on
126+
any ONE input field within the set. It doesn't matter which one you use, nor does
127+
it matter if the input fields are in chronological order in the page, nor does it
128+
matter whether the IDs have gaps in their numbering.
129+
</p>
130+
131+
<div id="example4">
132+
<div class="txtBoxRow">
133+
<input type="text" id="stuff0" name="lob0" value="Hello"/>
134+
</div>
135+
136+
<div class="txtBoxRow">
137+
<input type="text" id="stuff8" name="lob3" value="Konichiwa"/>
138+
</div>
139+
140+
<div class="txtBoxRow">
141+
<input type="text" id="stuff1" name="lob1" value="Bonjour"/>
142+
</div>
143+
144+
<div class="txtBoxRow">
145+
<input type="text" id="stuff3" name="lob2" value="Hola"/>
146+
</div>
147+
</div>
148+
149+
<h3>Example 5: Setting a limit on how many fields can be generated</h3>
150+
<p>
151+
This is set to allow 3 fields. You won't be able to add more after that,
152+
but if you delete one of them, you'll be able to add one again.
153+
</p>
154+
155+
<div id="example5">
156+
<div class="txtBoxRow">
157+
<input type="text" id="maxFields1" name="maxFields1"/>
158+
</div>
159+
</div>
160+
161+
<h2>Donations</h2>
162+
<p>
163+
I hope you found the code behind these examples helpful. Please consider donating to this project to show your
164+
support. Your support is greatly appreciated, and it motivates me to keep this project alive and to release
165+
more open source software.
166+
</p>
167+
<a href="https://paypal.me/KurtisLoVerde/5" target="new">https://paypal.me/KurtisLoVerde/5</a>
168+
</body>
169+
</html>

‎demo/img/add-active.png‎

159 Bytes
Loading

‎demo/img/add-inactive.png‎

154 Bytes
Loading

‎demo/img/remove-active.png‎

248 Bytes
Loading

‎demo/img/remove-inactive.png‎

241 Bytes
Loading

0 commit comments

Comments
 (0)