jQuery AddRemoveTextbox Plugin Demos

Notes:

1. You must have an Internet connection to use this demo, as jQuery is pulled from the jQuery CDN.
2. 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.

Example 2 - ID array notation: <input type="text" id="txt[0]">

Example 2 - ID number notation: <input type="number" id="number3">

The ID starts on 3, so the next generated ID will be 4

Example 3: <input type="color" id="color0">

If your browser supports it, you'll see a color picker here instead of a text field. AddRemoveTextbox supports this type, too!

Example 4: Pre-existing fields, IDs out of order and with gaps

In this example, a set of preexisting input fields are registered. You don't need to do anything differently to register the set: simply invoke AddRemoveTextbox on any ONE input field within the set. It doesn't matter which one you use, nor does it matter if the input fields are in chronological order in the page, nor does it matter whether the IDs have gaps in their numbering.

Example 5: Setting a limit on how many fields can be generated

This is set to allow 3 fields. You won't be able to add more after that, but if you delete one of them, you'll be able to add one again.

Donations

I hope you found the code behind these examples helpful. Please consider donating to this project to show your support. Your support is greatly appreciated, and it motivates me to keep this project alive and to release more open source software.