Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## Release 1.2 (August 31, 20106)

* Added callbacks for add/remove operations
* Throw an exeption if initialized with a non-existent ID


## Release 1.1.2 (August 29, 2016)

* Changed an occurrence of prop() to attr() - no functional impact, but made for the sake of correctness
Expand Down
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
AddRemoveTextbox v1.1.2
=======================
AddRemoveTextbox v1.2
=====================

See LICENSE for this software's licensing terms.

Expand All @@ -12,6 +12,7 @@ AddRemoveTextbox is a jQuery plugin which provides for dynamic creation and remo
* Configurable CSS classes for the 'add' and 'remove' buttons
* Configurable tooltips for the 'add' and 'remove' buttons
* Configurable limit on the number of input fields
* Configurable callbacks for add and remove operations
* Able to renumber id and name attributes to keep them contiguous (enabled through a configuration option)


Expand Down Expand Up @@ -83,6 +84,8 @@ See the included HTML file for more in-depth examples.
| `maxFields` | An 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) |
| `contiguous` | If `true`, renumber the `id` and `name` attributes upon initialization and when a row is removed. Renumbering is based on DOM order, not `id` or `name` values, and starts on the value specified by `startingNumber`. This setting is disabled by default because it can break applications. | false |
| `startingNumber` | This setting is used only when `contiguous` is set to `true`. | null |
| `addCallback` | A callback function to execute when a field is added. See the demo for more information. | null |
| `removeCallback` | A callback function to execute when a field is removed. See the demo for more information. | null |


## Thanks
Expand Down
2 changes: 1 addition & 1 deletion demo/css/demo.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* AddRemoveTextbox v1.1.2
* AddRemoveTextbox v1.2
* https://www.github.com/kloverde/jquery-AddRemoveTextbox
*
* Donations: https://paypal.me/KurtisLoVerde/5
Expand Down
35 changes: 34 additions & 1 deletion demo/demo.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>

<!--
AddRemoveTextbox v1.1.2
AddRemoveTextbox v1.2
https://www.github.com/kloverde/jquery-AddRemoveTextbox

Donations: https://paypal.me/KurtisLoVerde/5
Expand Down Expand Up @@ -55,6 +55,14 @@
<script type="text/javascript" src="../jquery.addremovetextbox.js"></script>

<script type="text/javascript">
function callbackDemoAdd( id, name ) {
alert( "Added field with id = " + id + ", name = " + name );
}

function callbackDemoRemove( id, name, val ) {
alert( "Field '" + id + "' was removed. Its value was '" + val + "'" );
}

$( document ).ready( function() {
// Example 1

Expand Down Expand Up @@ -109,6 +117,15 @@
removeButtonClass : "addRemoveButton imgRemove",
maxFields : 3
} );

// Example 7

$( "#callbackDemo1" ).addRemoveTextbox( {
addButtonClass : "addRemoveButton imgAdd",
removeButtonClass : "addRemoveButton imgRemove",
addCallback : callbackDemoAdd,
removeCallback : callbackDemoRemove
} );
} );
</script>
</head>
Expand Down Expand Up @@ -218,6 +235,22 @@ <h3>Example 6: Setting a limit on how many fields can be generated</h3>
</div>
</div>

<h3>Example 7: Callbacks</h3>
<p>
This example defines a callback that gets triggered when a field is added.
The callback then adds a blur callback to watch it for changes. Try it:
add a field, type a value into it, then click outside the field.
</p>
<p>
This example also defines a callback that gets triggered when a field is
removed. Remove a field and see what happens.
</p>
<div id="example7">
<div class="txtBoxRow">
<input type="text" id="callbackDemo1"/>
</div>
</div>

<h2>Donations</h2>
<p>
I hope you found the code behind these examples helpful. Please consider donating to this project to show your
Expand Down
34 changes: 30 additions & 4 deletions jquery.addremovetextbox.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* AddRemoveTextbox v1.1.2
* AddRemoveTextbox v1.2
* https://www.github.com/kloverde/jquery-AddRemoveTextbox
*
* Donations: https://paypal.me/KurtisLoVerde/5
Expand Down Expand Up @@ -62,9 +62,24 @@
contiguous : false,

// This setting is used only when 'contiguous' is set to true.
startingNumber : 0
startingNumber : 0,

// A callback function for add operations. Your callback must accept two string arguments:
// arg1: the id attribute of the added row
// arg2: the name attribute of the added row
addCallback : null,

// A callback function for remove operations. Your callback must accept three string arguments:
// arg1: the id attribute of the removed row
// arg2: the name attribute of the removed row
// arg3: the value of the removed row
removeCallback : null
}, options );

if( this.length === 0 || this == null ) {
throwException( "No matching field(s) found" );
}

var ID_PREFIX = this.attr( "id" ).replace( /\[?[0-9]*\]?$/, "" );
var IS_NUMBERED_NOTATION = this.attr( "id" ).match( /[0-9]+$/ ) != null;
var IS_ARRAY_NOTATION = this.attr( "id" ).match( /\[[0-9]\]$/ ) != null;
Expand Down Expand Up @@ -213,6 +228,10 @@

newRow.insertAfter( lastRow );

if( typeof settings.addCallback === "function" ) {
settings.addCallback( nextIdResults.nextId, nextIdResults.nextId );
}

return nextIdResults.nextId;
}

Expand All @@ -239,7 +258,10 @@
function removeRow( button ) {
var rowToRemove = button.parent();
var prevRow = rowToRemove.prev();
var inputId = rowToRemove.children( "input" ).attr( "id" );
var inputToRemove = rowToRemove.children( "input" );
var inputToRemoveVal = inputToRemove.val();
var inputId = inputToRemove.attr( "id" );
var inputName = inputToRemove.attr( "name" );

// Don't remove the row if it's the only/last one in the group.

Expand All @@ -264,7 +286,11 @@
rowToRemove.remove();
rebuild();
} else {
$( escape("#" + inputId) ).val( "" );
inputToRemove.val( "" );
}

if( typeof settings.removeCallback === "function" ) {
settings.removeCallback( inputId, inputName, inputToRemoveVal );
}
}

Expand Down
4 changes: 2 additions & 2 deletions jquery.addremovetextbox.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.