"Dynamic Form Fields"
Bootstrap 2.3.2 Snippet by msurguy

<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"> <div class="input-append"> <input autocomplete="off" class="span3" id="field1" name="prof1" type="text" placeholder="Type something (it has typeahead too)" data-provide="typeahead" data-items="8" data-source='["Aardvark","Beatlejuice","Capricorn","Deathmaul","Epic"]'/><button id="b1" class="btn btn-info add-more" type="button">+</button> </div> <br> <small>Press + to add another form field :)</small> </div> </div> </div> </div>
$(document).ready(function(){ var next = 1; $(".add-more").click(function(e){ e.preventDefault(); var addto = "#field" + next; next = next + 1; var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8">'; var newInput = $(newIn); $(addto).after(newInput); $("#field" + next).attr('data-source',$(addto).attr('data-source')); $("#count").val(next); }); });

Related: See More


Questions / Comments:

Lol, I never came back here to see all your replies.

But to answer your (open) questions :

CtrlZ : The hidden form field is used to determine the amount of fields the user has 'selected' / 'added' to the form. The value is auto incremented when pressing the (+).

Eeyern : It goes a bit far to explain to lot, but the form values can be parsed in the 'action' script.

Henri Kuiper () - 5 years ago - Reply 0


Hi there!

First of all, I really like this! After playing around a little bit, I still don't understand, what is the first <input> with type="hidden" for? Also, I can not track down the "#count"-selector, which is used in the addFormField()-function to set the value of "next". What do I miss? Maybe somebody can point me in the right direction.... Thanks a ton!

CtrlZ () - 5 years ago - Reply 0


How does this work with php? Adding stuff to the database? I know you would probably know how to do html, but any idea how to add form details into mysql database?

Eeyern () - 5 years ago - Reply 0


I have an idea =)

Use Backbone JS and Laravel PHP framework to do that ! Please read more at
http://maxoffsky.com/code-b...

Or just use AJAX from jQuery and send over JSON response from the form into the PHP script where you can process it and put it into the database. Laravel will make those things easier for you though, please look on my blog to get started with it.

maxsurguy () - 5 years ago - Reply 0


how to do this with input of type="file"? :)

Bosanac () - 5 years ago - Reply 0


That would be done with dropzonejs.com

maxsurguy () - 5 years ago - Reply 0


Hi, Sorry for asking a stupid question, but do we need to simply copy paste the script in an html editor? I am asking this because I tried this in a website, and nothing happened, I meant the button was not created. Help will be appreciated

Kaamil Nakhasi () - 5 years ago - Reply 0


You have to include Bootstrap css and Javascripts as specified here: http://twitter.github.io/bo...

maxsurguy () - 5 years ago - Reply 0


You need to load jQuery as well before the <script> section in this snippet.

XoneFobic () - 5 years ago - Reply 0


Woot, first post ;)

Henri Kuiper () - 5 years ago - Reply 0