"Dynamic Form Fields - Add & Remove"
Bootstrap 2.3.2 Snippet by cgrdavies

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <input type="hidden" name="count" value="1" /> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls" id="profs"> <form class="input-append"> <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div> </form> <br> <small>Press + to add another form field :)</small> </div> </div> </div> </div>
* { .border-radius(0) !important; } #field { margin-bottom:20px; }
$(document).ready(function(){ var next = 1; $(".add-more").click(function(e){ e.preventDefault(); var addto = "#field" + next; var addRemove = "#field" + (next); next = next + 1; var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">'; var newInput = $(newIn); var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">'; var removeButton = $(removeBtn); $(addto).after(newInput); $(addRemove).after(removeButton); $("#field" + next).attr('data-source',$(addto).attr('data-source')); $("#count").val(next); $('.remove-me').click(function(e){ e.preventDefault(); var fieldNum = this.id.charAt(this.id.length-1); var fieldID = "#field" + fieldNum; $(this).remove(); $(fieldID).remove(); }); }); });

Related: See More


Questions / Comments:

Try to use [ this.id.replace("remove","") ] replace [ this.id.charAt(this.id.length-1) ] then will fix 10 new fields bug.

JS Lee () - 7 years ago - Reply 0


I think it is not working with bootstrap 4.0.0. any experience with this?

Peter Kortvel () - 7 years ago - Reply 0


How can I use this feature to add it as way to do a search to my database?
i.e the PHP query will as an example be SELECT * FROM TABLENAME WHERE Field1 = "Input1" OR Field1 = "Input2" OR Field1 = "Input3" etc....

Leon Claassen () - 7 years ago - Reply 0


Does anyone have an example of adding a group of fields at once?

Al Grant () - 7 years ago - Reply 0


How to use it in reactjs?

Namrata Awasthi () - 7 years ago - Reply 0


a few bugs else its fine.....for a better solution visit inflatingknowledge.blogspot...

inflating knowledge blogspot () - 8 years ago - Reply 0


Great

karl () - 9 years ago - Reply 0


Does anyone know how or if it is possible to add angularJs ng-autocomplete when a new input tag is created? http://plnkr.co/edit/il2J8q...

Ka. () - 9 years ago - Reply 0


Nice one .good
Take a look at this tutorial for easy solution http://voidtricks.com/jquer...

Anand Roshan () - 9 years ago - Reply 0


How can I make this work with a set of input fields on a form?

johndoc () - 10 years ago - Reply 0


To fix the issue with the delete button after 10 input boxes, replace this line "this.id.charAt(this.id.length-1);" with this line "this.id.substr(this.id.lastIndexOf("whatever the last character is before the number")+1);" in this case the last character will be "e" since the delete button id is "remove" and then the number.
The issue with this is that the charAt function is grabbing the very last character, once you have ten fields, the very last character is 0 so it will delete the first input and leave the delete button. Hope this helps anybody else who visits this later.

OsomM () - 10 years ago - Reply 0


Thanks for the fix!

maxsurguy () - 10 years ago - Reply 0


No problem.

OsomM () - 10 years ago - Reply 1


How can I get this to work if I have more than just one field being added/removed? I have accomplished that already, I just haven't figured out the 10 problem

Edit-Nevermind, I tried 'e' like he used and it works perfectly.

Roger Hazen () - 10 years ago - Reply 1


e

testing223 (-1) - 3 years ago - Reply 0


"this.id.substr(this.id.lastIndexOf("e")+1);" this is all you have to do.

OsomM () - 10 years ago - Reply 0


e

testing223 (-1) - 3 years ago - Reply 0


latest link also had a bug when created input groups are more than 10 then the delete button removes only the btn-danger button not the input text field with it.

Indian () - 10 years ago - Reply 0


There is some bug with fields after 10 new fields was created.
On 11, 12, etc fields script doesn't work correctly.
Red block disappears, but input field still showing.

Ninja Gaiden () - 10 years ago - Reply 0


while the idea is cool it appears that clicking return will delete the top most entry if you are focused on one of the inputs. This happened in Chrome and Firefox. Is that a bug or a feature? Either way I would fix it.

Jared Toporek () - 10 years ago - Reply 0


Ok, here is a fixed version: http://bootsnipp.com/msurgu...

you can fix it by preventing the enter key event on your form :

$( "#form" ).keypress(function(e) {
if ( e.which == 13 ) {
e.preventDefault();
}
});

maxsurguy () - 10 years ago - Reply 0


works great - nice job on the fast correction

Jared Toporek () - 10 years ago - Reply 0