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 1 - array notation: <input type="text" id="txt[0]" name="txt[0]">

Example 2 - not array notation: <input type="number" id="number3" name="number3">

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

Example 3: <input type="color" ...>

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 - Renumbering: Pre-existing fields, IDs out of order and with gaps

These fields' IDs and names remain contiguous. Compare what the code says to what your favorite DOM inspector says. This functionality is disabled by default because it can break applications. Be sure that your application can handle changing IDs and names before using this.

Example 6: 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.

Example 7: Callbacks

This example defines a callback that gets triggered when a field is added, and a callback that gets triggered when a field is removed.

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.

https://paypal.me/KurtisLoVerde/5