"Dynamic Form Fields - Add & Remove BS3"
Bootstrap 3.1.0 Snippet by Bubelbub

<div class="container"> <div class="row"> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls"> <form role="form" autocomplete="off"> <div class="entry input-group col-xs-3"> <input class="form-control" name="fields[]" type="text" placeholder="Type something" /> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </form> <br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small> </div> </div> </div> </div>
.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }
$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });

Similar snippets: See More


matt watkins 2014-04-25 22:53:34
    This is interesting, but how do you access the fields collection once created?
maxsurguy 2014-04-25 22:58:52
    It is created as an array of elements (the [] in the name of the input field make it an array) so you could submit a form containing these fields and retrieve them from the array.
Willy Wonka 2016-11-27 06:32:58
    Hi maxsurguy, can you elaborate? because for each field I'm getting name as 'fileds[]' :/
Hermann Herz 2014-05-25 11:21:42
Thiago 2014-06-26 00:15:26
    What if you already have another Form, outside this whole block? Can you just replace the Form tag for a different one?
Luis Vivas 2014-08-04 22:05:47
    How can i use this form with another form already existing, this form i am using it to add for example colours, how can i get those colours? and how can i make this form works? cuz doesn't works.
JulianJ 2014-08-12 08:40:24
    This is great but why is it that whenever I add this form to my site and add another field the fields do not appear directly below one another but appear diagonally across the page?
maxsurguy 2014-08-20 22:13:47
    That could mean that you don't have a "row" there. Whats your full HTML for that page?
JulianJ 2014-08-29 16:04:42
    I think I figured it out with the code below but what I really want is to have two fields next one another on the same line with just one add/remove button.
Mahmoud Walid Awadeen 2015-01-06 23:43:27
    has any one tried to use this in a modal ? if yes when the modal is closed and opened again the form get messed up
sandip 2015-06-07 12:31:32
    Check out this with model ex
chris 2015-02-26 15:12:53
    is there any way to make it duplicate a whole new form?
eric 2015-05-29 07:12:13
    Anyway to set a limit and increment a count (how many fields)?
Shivshambhu Gupta 2015-10-13 06:21:48
    well, this code is fine. easy to understand :) , but when i'll apply on my page that's no working . :(
Marcin 2015-12-13 20:37:02
riyaz 2016-10-13 06:31:09
    How to add limit
Zohaib Jadoon 2017-02-23 12:49:13
pmpman 2016-11-20 19:07:55
    Thanks for the code. How would i go about submitting all of the inputs though, rather than just one. Currently on my website, when I click submit, only the value of the last box is submitted rather than all of them.
Austint30 2017-01-06 01:52:28
    This works really well until you add another dynamic field section for something else on the same page. It completely breaks and it adds a field only above the first field on the page.
Oscar Le 2017-06-09 23:32:27
    Wow! This is neat! Is it possible to rename each input so each of them have a unique name? E.g. Field1, Field2 and so on?

Commenting will be back soon.