"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; }); });

Questions / Comments:

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?

Oscar Le (0) - 7 months ago - Reply 0


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.

This can be reproduced by going to the HTML section, copy the whole container or Ctrl + A. Then, paste below the first container. Now test it and you will see what I am talking about. Is there any way to fix this?

EDIT: I managed to fix this myself! Use this script instead!

$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();

var controlForm = $(this).parents('.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('');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();

e.preventDefault();
return false;
});
});

Austint30 (0) - 1 year ago - Reply 0


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.

pmpman (0) - 1 year ago - Reply 0


How to add limit

riyaz (0) - 1 year ago - Reply 0


Zohaib Jadoon (0) - 10 months ago - Reply 0


Hello,

how to add value to the database using Codeigniter

Marcin (0) - 2 years ago - Reply 0


well, this code is fine. easy to understand :) , but when i'll apply on my page that's no working . :(

Shivshambhu Gupta (0) - 2 years ago - Reply 0


Anyway to set a limit and increment a count (how many fields)?

eric (0) - 2 years ago - Reply 0


is there any way to make it duplicate a whole new form?

chris (0) - 2 years ago - Reply 0


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

Mahmoud Walid Awadeen (0) - 3 years ago - Reply 0


Check out this with model ex

<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<script>
$(document).ready(function(){

//This event is fired immediately when the hide instance method has been called.
$('#my-modal').on('hidden.bs.modal', function () {
$(".txt_data").each(function(i){
if ($(this).val() != "")
{
window.alert($(this).val());
}
});
});

//Dynamicaly new button
$(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('');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
});
</script>
<style>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 140%;
}
.control-group
{
margin:30px;
}
</style>

</head>
<body>

<button type="button" class="" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div id="my-modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">

<div id="new_department_container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">

<div class="entry input-group col-xs-12">
<input class="form-control txt_data" type="text" value="Add New" placeholder=""/>

<button class="btn btn-danger btn-remove btn-height" type="button">

</button>

</div>

<div class="entry input-group col-xs-12">
<input class="form-control txt_data" type="text" placeholder=""/>

<button class="btn btn-success btn-add btn-height" type="button">

</button>

</div>

</form>
<small>Press to add new department. </small>
</div>
</div>
</div>

</div>
</div>
</div>

</div>
</body>

sandip (0) - 2 years ago - Reply 0


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?

JulianJ (0) - 3 years ago - Reply 0


That could mean that you don't have a "row" there. Whats your full HTML for that page?

maxsurguy (0) - 3 years ago - Reply 0


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.

<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" method="post" action="">

<div class="entry input-group col-xs-3">

<input class="form-control" name="production[]" type="text" placeholder="Type something"/>

<input class="form-control" name="company[]" type="text" placeholder="Type something"/>



<button class="btn btn-success btn-add" type="button">



</button>

</div>

<input type="submit" name="save" value="Save"/>

</form>


<small>Press to add another form field :)</small>

</div>

</div>

</div>

</div>

JulianJ (0) - 3 years ago - Reply 0


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.

Luis Vivas (0) - 3 years ago - Reply 0


What if you already have another Form, outside this whole block? Can you just replace the Form tag for a different one?

Thiago (0) - 3 years ago - Reply 0


Thanks!

How do I have to change this so I can have two or three input fields in a row (only the last input field in this row should have the + sign), when clicking the + sign a new line with two/three input fields should appear....

Hermann Herz (0) - 3 years ago - Reply 0


This is interesting, but how do you access the fields collection once created?

matt watkins (0) - 3 years ago - Reply 0


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.

maxsurguy (0) - 3 years ago - Reply 0


Hi maxsurguy, can you elaborate? because for each field I'm getting name as 'fileds[]' :/

Willy Wonka (0) - 1 year ago - Reply 0


Related: See More