Bootstrap Snippet Dynamic Form Fields - Add & Remove using HTML CSS jQuery

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="msvalidate.01" content="36A28D9109C077BA3E623651FC1656F4" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="fb:admins" content="19908503" /> <meta property="fb:app_id" content="112989545392380" /> <meta property="og:title" content="HTML Snippets for Twitter Boostrap framework : Bootsnipp.com" /> <meta property="og:type" content="website" /> <meta property="twitter:account_id" content="786331568" /> <meta property="og:url" content="https://bootsnipp.com/snippets/kM0M" /> <meta itemprop="name" content="Bootstrap Dynamic Form Fields - Add & Remove Example"> <meta itemprop="description" content="Bootstrap example of Dynamic Form Fields - Add & Remove using HTML, Javascript, jQuery, and CSS. Snippet by cgrdavies"> <meta name="description" content="Bootstrap example of Dynamic Form Fields - Add & Remove using HTML, Javascript, jQuery, and CSS. Snippet by cgrdavies"> <meta name="keywords" content="Bootstrap, css, javascript, jquery, code, example, snippet,Dynamic Form Fields - Add & Remove, "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@bootsnipp"> <meta name="twitter:title" content="Dynamic Form Fields - Add & Remove"> <meta name="twitter:description" content="High quality Bootstrap 2.3.2 Snippet by cgrdavies. Share yours today!"> <meta name="twitter:creator" content="@bootsnipp"> <meta name="twitter:image" content="https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/ec855faea117a915761f86799d08df9916aec6d9.jpeg "> <meta property="og:image" content="https://bootsnipp.com/img/logo.jpg" /> <meta property="og:site_name" content="Bootsnipp.com" /> <meta property="og:description" content="Awesome Bootstrap HTML CSS JS Snippet on Bootsnipp.com." /> <title>Bootstrap Snippet Dynamic Form Fields - Add & Remove using HTML CSS jQuery </title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <link rel="shortcut icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-144x144-precomposed.png"> <link rel="alternate" type="application/rss+xml" title="Latest snippets from Bootsnipp.com" href="https://bootsnipp.com/feed.rss" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">  <link rel="stylesheet" href="/dist/bootsnipp.min.css">   <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); window.onload = function() { /* $('body').append('<script type="text/javascript" src="https://srv.buysellads.com/ads/CVADLKQJ.json?callback=drop_ad" async><\/script>'); $('body').append("<style>.bsa-apiads {\ line-height: 1.5;\ display: inline-block;\ float: left;\ font-size: 12px;\ background-color: #5A8DB6;\ border: solid 1px #337799;\ box-shadow: inset 0 1px hsla(0, 0%, 100%, .1);\ box-sizing: border-box;\ background-image: url('http://www.danstools.com/devops/img/devoops_pattern_b10.png');\ margin: 1em 1em 0 2em;\ border-radius: 4px;\ text-align: center;\ padding: .25em;\ }\ \ .bsa-apiads a:before {\ margin-right: 4px;\ padding: 2px 6px;\ border-radius: 3px;\ background-color: #58B668;\ color: #fff;\ content: 'Ad';\ }\ \ .bsa-apiads a {\ color: #fff;\ }\ \ .bsa-apiads a:hover {\ color: inherit;\ }</style>");*/ setTimeout(function() { var ad = document.querySelector(".bsap_ac1f95c148ce6148393fd34e69a52240"); var promos = document.querySelectorAll(".n6y7v"); var isblock = 0; for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (isblock ==1 || (ad && ad.innerHTML.replace(/\s/g, "").length == 0)) { isblock = 1; // ad.style.cssText = 'display:block !important'; // promo.style.cssText = 'display:none !important'; promo.innerHTML = ''; promo.style.display= 'inline-block'; promo.style.visibility= 'visible'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = ''; // var promotwo = document.querySelector("#toppromo2"); promo.childNodes[0].childNodes[0].style.width= ''; } } }, 1000); }; </script> <script type="text/javascript"> var fb_param = {}; fb_param.pixel_id = '6007046190250'; fb_param.value = '0.00'; (function(){ var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(fpw, ref); })(); </script> <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6007046190250&value=0" /></noscript> </head> <body>  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>  <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a class="navbar-brand animate" href="https://bootsnipp.com">Bootsnipp</a> </div> </div>   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-left"> <li> <a href="#" class="dropdown-toggle " data-toggle="dropdown">Bootstrap <span class="caret"></span> <span style="font-size:.5em; position:absolute; top:3px; left:2px">For</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">CSS Frameworks</li> <li class="active"><a href="/" class="">Bootstrap</a></li> <li class=""><a href="/foundation" class="">Foundation</a></li> <li class=""><a href="/semanticui" class="">Semantic UI</a></li> <li class=""><a href="/materialize" class="">Materialize</a></li> <li class=""><a href="/purecss" class="">Pure</a></li> <li class=""><a href="/bulma" class="">Bulma</a></li> <li class="dropdown-header">References</li> <li class=""><a href="/cssref" class="">CSS Reference</a></li>  </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class=""> <form action="https://bootsnipp.com/search" method="GET" role="search"> <input style="width:100%;margin-top:10px;" type="text" class="input-sm form-control" name="q" placeholder="Search for snippets"> </form> </li>    <li> <a href="#" class="dropdown-toggle " data-toggle="dropdown">Tools <span class="caret"></span></a> <ul class="dropdown-menu" role="menu">  <li class=""><a href="https://bootsnipp.com/forum/bootstrap" class="">Community</a></li> <li class=""><a href="https://bootsnipp.com/builder" class="">Page Builder <span class="pull-right glyphicon glyphicon-modal-window"></span></a></li> <li class=""><a href="https://bootsnipp.com/forms" class="">Form Builder <span class="pull-right glyphicon glyphicon-tasks"></span></a></li> <li class=""><a href="https://bootsnipp.com/buttons" class="">Button Builder <span class="pull-right glyphicon glyphicon-edit"></span></a></li> <li class=""><a href="https://bootsnipp.com/iconsearch" class="">Icon Search <span class="pull-right glyphicon glyphicon-search"></span></a></li> <li class="dropdown-header">Dan's Tools</li> <li class=""><a href="http://www.cleancss.com/diff-compare-merge/" class="">Diff / Merge <span class="pull-right glyphicon glyphicon-transfer"></span></a></li> <li class=""><a href="http://www.hexcolortool.com/" class="">Color Picker <span class="pull-right glyphicon glyphicon-pencil"></span></a></li> <li class=""><a href="http://www.danstools.com/keyword-tool/" class="">Keyword Tool <span class="pull-right glyphicon glyphicon-list-alt"></span></a></li> <li class=""><a href="http://www.cssfontstack.com/Web-Fonts" class="">Web Fonts <span class="pull-right glyphicon glyphicon-font"></span></a></li> <li class=""><a href="http://www.htaccessredirect.net/" class="">.htaccess Generator <span class="pull-right glyphicon glyphicon-console"></span></a></li> <li class=""><a href="http://www.favicon-generator.org/" class="">Favicon Generator <span class="pull-right glyphicon glyphicon-picture"></span></a></li> <li class=""><a href="http://www.website-performance.org/" class="">Site Speed Test <span class="pull-right glyphicon glyphicon-dashboard"></span></a></li> </ul> </li> <li class="dropdown"> <a href="https://bootsnipp.com/snippets" class="dropdown-toggle " data-toggle="dropdown">Snippets <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class=""><a href="https://bootsnipp.com" class="">Featured <span class="pull-right glyphicon glyphicon-star"></span></a></li> <li class=""><a href="https://bootsnipp.com/tags" class="">Tags <span class="pull-right glyphicon glyphicon-tags"></span></a></li> <li class="dropdown-header">By Bootstrap Version</li> <li><a href="https://bootsnipp.com/tags/4.1.1" class="">4.1.1</a></li> <li><a href="https://bootsnipp.com/tags/4.0.0" class="">4.0.0</a></li> <li><a href="https://bootsnipp.com/tags/3.3.0" class="">3.3.0</a></li> <li><a href="https://bootsnipp.com/tags/3.2.0" class="">3.2.0</a></li> <li><a href="https://bootsnipp.com/tags/3.1.0" class="">3.1.0</a></li> <li><a href="https://bootsnipp.com/tags/3.0.3" class="">3.0.3</a></li> <li><a href="https://bootsnipp.com/tags/3.0.1" class="">3.0.1</a></li> <li><a href="https://bootsnipp.com/tags/3.0.0" class="">3.0.0</a></li> <li><a href="https://bootsnipp.com/tags/2.3.2" class="">2.3.2</a></li> </ul> </li> <li class=""><a href="https://bootsnipp.com/register" class="">Register</a></li> <li id="nav-login-btn" class=""><a href="https://bootsnipp.com/login" class="">Login</a></li>  </ul> </div> </div>  </nav> <div class="container" style="margin-top:10px;"> <div class="row" itemscope="http://schema.org/Thing"> <div class="col-sm-12 col-md-4"> <div class="title-bar" style="margin-bottom:0px;"> <a href="https://bootsnipp.com/cgrdavies" title="Bootstrap snippets by cgrdavies" class="avatar-sm-container pull-left"><img src="https://secure.gravatar.com/avatar/f8e484e6a685a8c01f964c577e538c66?s=100&r=g&d=mm" class="img-rounded user-avatar-sm"></a> <h4 itemprop="name">"Dynamic Form Fields - Add & Remove"<br> <small>Bootstrap 2.3.2 Snippet by <a href="https://bootsnipp.com/cgrdavies" title="Bootstrap snippets by cgrdavies" itemscope itemtype="http://schema.org/Person" itemprop="name">cgrdavies</a></small> </h4> <div class="clearfix"></div> </div> <div id="tags" itemprop="description" style="padding-top:0px; float:left;"> <a href="https://bootsnipp.com/tags/2.3.2"><span class="label label-primary">2.3.2</span></a> <a href="https://bootsnipp.com/tags/jquery" title="jquery"><span class="label label-primary">jQuery</span></a> </div> </div> <div class="col-sm-12 col-md-8"> <div class="row" style="margin-top:10px"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"> <center>  <div id="ezoic-pub-ad-placeholder-103"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block;width:728px;height:90px" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="728x90"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </center> </div>  </div> </div> </div> <div class="row" style="margin-top: 10px;margin-bottom:10px;"> <div class="col-md-8"> <div class="btn-group"> <button type="button" id="show-preview" class="active btn btn-info">Preview</button> <button type="button" id="show-html" class="btn btn-info">HTML</button> <button type="button" id="show-css" class="btn btn-info">CSS</button> <button type="button" id="show-js" class="btn btn-info">JS</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span>  </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="https://bootsnipp.com/fullscreen/kM0M" target="_blank"><span class="glyphicon glyphicon-fullscreen"></span> View Full Screen</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="icon-code-fork"></span> Fork </button> <ul class="dropdown-menu pull-right" role="menu" style="max-height:300px;overflow-y:scroll"> <li><a href="https://bootsnipp.com/fork/kM0M" id="reboot" title="Copy this snippet"><span class="icon-code-fork"></span> Fork this</a></li> </ul> </div>  <div id="action-bar" style="display: inline-block"> <a href="#" class="btn btn-default disabled"><i class="icon-eye-open"></i> 496.3K</a> <a href="#comments" class="btn btn-default tip" title="View comments"><i class="icon-comment"></i>&nbsp</a> <a href="https://bootsnipp.com/favorites/snippet/kM0M?url=snippets%2FkM0M" class="btn btn-default tip" title="Please log in to favorite this snippet"><span class="glyphicon glyphicon-thumbs-up"></span> 153 Fav</a> </div> </div> <div class="col-md-4"> <div class="pull-right social-sharing hidden-xs" style="padding: 0px"> <a href="#" class="btn btn-primary" onclick="window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('http://bootsnipp.com/snippets/kM0M') +'&t=' + encodeURIComponent('Dynamic Form Fields - Add & Remove #Bootstrap #snippet'), 'facebook-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-facebook"></i> </a> <a href="#" class="btn btn-info" onclick="window.open( 'https://twitter.com/share?url='+encodeURIComponent('http://bootsnipp.com/snippets/kM0M')+'&text='+encodeURIComponent('I shared a cool #snippet on @bootsnipp :') + '&count=none/', 'twitter-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-twitter"></i> </a> </div> </div> <div class="row visible-xs"> <div class="col-md-12"> <p> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary" onclick="window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('http://bootsnipp.com/snippets/kM0M') +'&t=' + encodeURIComponent('Dynamic Form Fields - Add & Remove #Bootstrap #snippet'), 'facebook-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-facebook"></i> Post to Facebook </a> <a href="#" class="btn btn-info" onclick="window.open( 'https://twitter.com/share?url='+encodeURIComponent('http://bootsnipp.com/snippets/kM0M')+'&text='+encodeURIComponent('I shared a cool #snippet on @bootsnipp :') + '&count=none/', 'twitter-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-twitter"></i> Tweet this </a> </div> </p> </div> </div> </div> </div> </div> <div id="playground-container" style="overflow: hidden"> <div id="preview-container"><iframe id="snippet-preview" class="preview-iframe" src="//s.bootsnipp.com/iframe/kM0M"></iframe></div> <div class="container"> <div class="row" itemscope="http://schema.org/Code" > <div class="col-lg-12" itemprop="programmingLanguage" content="html/css/js"> <div id="editor-html" class="playground-editor" style="height:500px;" itemprop="sampleType"><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>  <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></div> <div id="editor-css" class="playground-editor" style="height:500px;" itemprop="sampleType">* { .border-radius(0) !important; } #field { margin-bottom:20px; }</div> <div id="editor-js" class="playground-editor" style="height:500px;" itemprop="sampleType">$(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(); }); }); }); </div> </div> </div> </div> </div> <div class="container"> <div class="col-md-12"> <h2>Related: <small><a href="https://bootsnipp.com/similar/kM0M">See  More</a></small></h2> <div class="row"> <div class="scrollpost col-sm-12 col-xs-12 col-md-3 col-lg-3 col-xl-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts"> <a target="_new" href="https://www.creative-tim.com/product/argon-dashboard-pro?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> <a href="/templates"> <span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="Templates"> Template</span></a> </p> <p class="lead snipp-title"> <a target="_new" href="https://www.creative-tim.com/product/argon-dashboard-pro?partner=114912"> Argon Dashboard PRO <br/></a> </p> </div> <a target="_new" href="https://www.creative-tim.com/product/argon-dashboard-pro?partner=114912"> <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/137/thumb/opt_adp_thumbnail.jpg?1544778965" width="320" height="240" alt=" Argon Dashboard PRO "> </a> <div class="caption"> </div> </div> </div> <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts hidden-md"> <a href="https://bootsnipp.com/snippets/4MrdQ" class="tip" data-toggle="tooltip" title="Viewed">63.9K <i class="icon-eye-open"></i></a> <a href="https://bootsnipp.com/snippets/4MrdQ" class="tip" data-toggle="tooltip" title="Favorited">37 <i class="icon-thumbs-up"></i></a>  </p> <p class="lead snipp-title"> <a href="https://bootsnipp.com/snippets/4MrdQ">Bootstrap 4 Animated Dynamic Form</a> </p> </div> <a href="https://bootsnipp.com/snippets/4MrdQ"> <img class="lazy" data-original="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-ee4ea13b4b4fe377b8faf6c748afcb4bb6e12d2f.jpg" width="320" height="240" alt="Bootstrap 4 Animated Dynamic Form"> </a> <div class="caption"> </div> </div> </div> <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts hidden-md"> <a href="https://bootsnipp.com/snippets/kMp2V" class="tip" data-toggle="tooltip" title="Viewed">364.9K <i class="icon-eye-open"></i></a> <a href="https://bootsnipp.com/snippets/kMp2V" class="tip" data-toggle="tooltip" title="Favorited">290 <i class="icon-thumbs-up"></i></a>  </p> <p class="lead snipp-title"> <a href="https://bootsnipp.com/snippets/kMp2V">Dynamic Sortable Tables</a> </p> </div> <a href="https://bootsnipp.com/snippets/kMp2V"> <img class="lazy" data-original="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/e6aa045c6d7e90aa9fc238b593533e5d2fc8e612.jpeg" width="320" height="240" alt="Dynamic Sortable Tables"> </a> <div class="caption"> </div> </div> </div> <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts hidden-md"> <a href="https://bootsnipp.com/snippets/bxzmb" class="tip" data-toggle="tooltip" title="Viewed">472.7K <i class="icon-eye-open"></i></a> <a href="https://bootsnipp.com/snippets/bxzmb" class="tip" data-toggle="tooltip" title="Favorited">45 <i class="icon-thumbs-up"></i></a>  </p> <p class="lead snipp-title"> <a href="https://bootsnipp.com/snippets/bxzmb">login-form</a> </p> </div> <a href="https://bootsnipp.com/snippets/bxzmb"> <img class="lazy" data-original="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/nofeat-d3c091c068b6e1fc13464df28bc8d8d18b187e61.jpg" width="320" height="240" alt="login-form"> </a> <div class="caption"> </div> </div> </div> </div> </div> </div> <hr> <div class="container"> <div class="col-md-8"> <a name="comments"></a> <h2 id="comments">Questions / Comments: </h2> <input type="hidden" id="forumIdHash" value="kM0M"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <style>.hljs { white-space: nowrap; max-height: 300px;}pre {padding:0}.forumDivOuter {padding:10px 10px;}.forumTagline {padding:10px 0;}.forumvote:hover {color:orange; cursor: pointer;}.forumText { font-weight:500; font-size:1.2em;}.forumName { font-weight:200; font-size:1em;}.forumTime { font-size:1em;}.forumKey { border-radius: 4px; border: 2px solid #555; width: 20px; display: inline-flex; align-items: center; justify-content: center; height: 20px; margin: 0 2px;}</style><div class="newPost"><div id="newPostContainer" class="container-fluid" style="margin-top:10px;"></div><div class='forumDivOuter' style=''><div id="forumDiv"><textarea class="autoExpand forumPost form-control" rows="4" data-min-rows="4" placeholder="Enter your message here"></textarea><br/><button class="forumPostButton btn btn-default">Post</button><span style="margin: 0 10px;" class="pull-right"><a href="#" data-toggle="popover" title="" data-html="true" data-content="<ul><li>When asking a question, provide as much detail as possible. Posts of simply "It doesn't work" may be removed. </li><li>Don't Spam</li><li>Be respectful</li></ul>">Posting Guidelines</a></span><span style="margin: 0 10px;" class="pull-right"><a href="#" data-toggle="popover" title="" data-html="true" data-content="<ul><li><span class='forumKey'>`</span> - Surround code with backticks</li><li><span class='forumKey'>*</span> - Surround text with stars to italicize.</li><li><span class='forumKey'>></span><span class='forumKey'>></span> - A line starting with two greater than characters will be indented as a quote.</li><li>A blank line will separate paragraphs.</li></ul>">Formatting</a></span></div></div><hr><div class='col-md-12 hidden'><p class='forumTagline'><strong class='reply 0 name'></strong> - Now</p><hr></div></div><div id='jump3116817989' data-postid='3116817989' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>Try to use [ this.id.replace("remove","") ] replace [ this.id.charAt(this.id.length-1) ] then will fix 10 new fields bug.</p></div><p class='forumTagline'><span class='forumName'>JS Lee <small>()</small></span> - <span class='text-muted'>8 years ago</span> - <a href='#' class='forumReply' data-id='3116817989'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 3116817989 name'></strong> - Now</p><hr></div><div id='jump3106751903' data-postid='3106751903' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>I think it is not working with bootstrap 4.0.0. any experience with this?</p></div><p class='forumTagline'><span class='forumName'>Peter Kortvel <small>()</small></span> - <span class='text-muted'>8 years ago</span> - <a href='#' class='forumReply' data-id='3106751903'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 3106751903 name'></strong> - Now</p><hr></div><div id='jump2961777952' data-postid='2961777952' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>How can I use this feature to add it as way to do a search to my database?<br>i.e the PHP query will as an example be SELECT * FROM TABLENAME WHERE Field1 = "Input1" OR Field1 = "Input2" OR Field1 = "Input3" etc....</p></div><p class='forumTagline'><span class='forumName'>Leon Claassen <small>()</small></span> - <span class='text-muted'>8 years ago</span> - <a href='#' class='forumReply' data-id='2961777952'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 2961777952 name'></strong> - Now</p><hr></div><div id='jump2943452818' data-postid='2943452818' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>Does anyone have an example of adding a group of fields at once?</p></div><p class='forumTagline'><span class='forumName'>Al Grant <small>()</small></span> - <span class='text-muted'>8 years ago</span> - <a href='#' class='forumReply' data-id='2943452818'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 2943452818 name'></strong> - Now</p><hr></div><div id='jump2856171787' data-postid='2856171787' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>How to use it in reactjs?</p></div><p class='forumTagline'><span class='forumName'>Namrata Awasthi <small>()</small></span> - <span class='text-muted'>8 years ago</span> - <a href='#' class='forumReply' data-id='2856171787'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 2856171787 name'></strong> - Now</p><hr></div><div id='jump2500712171' data-postid='2500712171' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>a few bugs else its fine.....for a better solution visit <a href="http://inflatingknowledge.blogspot.com" rel="nofollow noopener">inflatingknowledge.blogspot...</a></p></div><p class='forumTagline'><span class='forumName'>inflating knowledge blogspot <small>()</small></span> - <span class='text-muted'>9 years ago</span> - <a href='#' class='forumReply' data-id='2500712171'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 2500712171 name'></strong> - Now</p><hr></div><div id='jump1621341368' data-postid='1621341368' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>Great</p></div><p class='forumTagline'><span class='forumName'>karl <small>()</small></span> - <span class='text-muted'>10 years ago</span> - <a href='#' class='forumReply' data-id='1621341368'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1621341368 name'></strong> - Now</p><hr></div><div id='jump1377963381' data-postid='1377963381' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>Does anyone know how or if it is possible to add angularJs ng-autocomplete when a new input tag is created? <a href="http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview" rel="nofollow noopener">http://plnkr.co/edit/il2J8q...</a></p></div><p class='forumTagline'><span class='forumName'>Ka. <small>()</small></span> - <span class='text-muted'>10 years ago</span> - <a href='#' class='forumReply' data-id='1377963381'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1377963381 name'></strong> - Now</p><hr></div><div id='jump1346225940' data-postid='1346225940' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>Nice one .good<br>Take a look at this tutorial for easy solution <a href="http://voidtricks.com/jquery-add-remove-input-fields/" rel="nofollow noopener">http://voidtricks.com/jquer...</a></p></div><p class='forumTagline'><span class='forumName'>Anand Roshan <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1346225940'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1346225940 name'></strong> - Now</p><hr></div><div id='jump1244950077' data-postid='1244950077' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>How can I make this work with a set of input fields on a form?</p></div><p class='forumTagline'><span class='forumName'>johndoc <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1244950077'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1244950077 name'></strong> - Now</p><hr></div><div id='jump1181196760' data-postid='1181196760' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>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.<br>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.</p></div><p class='forumTagline'><span class='forumName'>OsomM <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1181196760'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1181196760 name'></strong> - Now</p><hr></div><div id='jump1181208754' data-postid='1181208754' class='col-md-11 col-md-offset-1'><div class='forumText forumMax'><p>Thanks for the fix!</p></div><p class='forumTagline'><span class='forumName'>maxsurguy <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1181208754'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-12 col-md-offset-2 hidden'><p class='forumTagline'><strong class='reply 1181208754 name'></strong> - Now</p><hr></div><div id='jump1182307813' data-postid='1182307813' class='col-md-10 col-md-offset-2'><div class='forumText forumMax'><p>No problem.</p></div><p class='forumTagline'><span class='forumName'>OsomM <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1182307813'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>1</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-11 col-md-offset-3 hidden'><p class='forumTagline'><strong class='reply 1182307813 name'></strong> - Now</p><hr></div><div id='jump1205320979' data-postid='1205320979' class='col-md-9 col-md-offset-3'><div class='forumText forumMax'><p>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</p><p>Edit-Nevermind, I tried 'e' like he used and it works perfectly. </p></div><p class='forumTagline'><span class='forumName'>Roger Hazen <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1205320979'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>1</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-10 col-md-offset-4 hidden'><p class='forumTagline'><strong class='reply 1205320979 name'></strong> - Now</p><hr></div><div id='jump29721' data-postid='29721' class='col-md-9 col-md-offset-3'><div class='forumText forumMax'><p>e</p></div><p class='forumTagline'><span class='forumName'>testing223 <small>(-1)</small></span> - <span class='text-muted'>4 years ago</span> - <a href='#' class='forumReply' data-id='29721'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-10 col-md-offset-4 hidden'><p class='forumTagline'><strong class='reply 29721 name'></strong> - Now</p><hr></div><div id='jump1206173070' data-postid='1206173070' class='col-md-9 col-md-offset-3'><div class='forumText forumMax'><p>"this.id.substr(this.id.lastIndexOf("e")+1);" this is all you have to do.</p></div><p class='forumTagline'><span class='forumName'>OsomM <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1206173070'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-10 col-md-offset-4 hidden'><p class='forumTagline'><strong class='reply 1206173070 name'></strong> - Now</p><hr></div><div id='jump29720' data-postid='29720' class='col-md-9 col-md-offset-3'><div class='forumText forumMax'><p>e</p></div><p class='forumTagline'><span class='forumName'>testing223 <small>(-1)</small></span> - <span class='text-muted'>4 years ago</span> - <a href='#' class='forumReply' data-id='29720'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-10 col-md-offset-4 hidden'><p class='forumTagline'><strong class='reply 29720 name'></strong> - Now</p><hr></div><div id='jump1161080481' data-postid='1161080481' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>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.</p></div><p class='forumTagline'><span class='forumName'>Indian <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1161080481'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1161080481 name'></strong> - Now</p><hr></div><div id='jump1110833710' data-postid='1110833710' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>There is some bug with fields after 10 new fields was created.<br>On 11, 12, etc fields script doesn't work correctly.<br>Red block disappears, but input field still showing.</p></div><p class='forumTagline'><span class='forumName'>Ninja Gaiden <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1110833710'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1110833710 name'></strong> - Now</p><hr></div><div id='jump1109994031' data-postid='1109994031' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>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.</p></div><p class='forumTagline'><span class='forumName'>Jared Toporek <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1109994031'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 1109994031 name'></strong> - Now</p><hr></div><div id='jump1110054188' data-postid='1110054188' class='col-md-11 col-md-offset-1'><div class='forumText forumMax'><p>Ok, here is a fixed version: <a href="http://bootsnipp.com/msurguy/snippets/3qbV" rel="nofollow noopener">http://bootsnipp.com/msurgu...</a></p><p>you can fix it by preventing the enter key event on your form :</p><p> $( "#form" ).keypress(function(e) {<br> if ( e.which == 13 ) {<br> e.preventDefault();<br> }<br> });</p></div><p class='forumTagline'><span class='forumName'>maxsurguy <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1110054188'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-12 col-md-offset-2 hidden'><p class='forumTagline'><strong class='reply 1110054188 name'></strong> - Now</p><hr></div><div id='jump1111325773' data-postid='1111325773' class='col-md-10 col-md-offset-2'><div class='forumText forumMax'><p>works great - nice job on the fast correction</p></div><p class='forumTagline'><span class='forumName'>Jared Toporek <small>()</small></span> - <span class='text-muted'>11 years ago</span> - <a href='#' class='forumReply' data-id='1111325773'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-11 col-md-offset-3 hidden'><p class='forumTagline'><strong class='reply 1111325773 name'></strong> - Now</p><hr></div> <div style="margin-top:10px"> <center>  <div id="ezoic-pub-ad-placeholder-102"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>   </center> </div> </div> <div class="col-md-4"> <div style="margin-top:10px"> <center>  <div id="ezoic-pub-ad-placeholder-147"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>   </center> </div> </div> <hr /> <div class="row"> <div class="col-md-8">  </div> <div class="col-md-4" style="padding-top: 60px">  <div id='div-gpt-ad-1490987467028-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1490987467028-0'); }); </script> </div> </div> </div> </div> <footer class="bs-footer" role="contentinfo"> <div class="container"> <div class="bs-social"> <ul class="bs-social-buttons"> <li class="facebook-button"> <div id="fb-root"></div> <div id="js-facebook-share" class="fb-like" data-href="http://bootsnipp.com" data-width="130" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div> </li> <li class="follow-btn"> <a id="js-twitter-follow" href="https://twitter.com/bootsnipp" class="twitter-follow-button" data-show-count="false">Follow @bootsnipp</a> </li> <li class="tweet-btn"> <a id="js-twitter-tweet" href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootsnipp.com" data-text="RT Design elements and code snippets for #twbootstrap HTML/CSS/JS framework" data-via="bootsnipp" data-related="bootsnipp">Tweet</a> </li> </ul> </div> <p>Bootsnipp.com © 2017 <a href="http://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="https://bootsnipp.com/privacy" target="_blank">Site Privacy policy</a> | <a href="/about">About</a> | <a href="mailto:bootsnipp@gmail.com">Advertise</a> | Featured snippets are <a href="https://bootsnipp.com/license">MIT license.</a> </p> </div> </footer> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="/dist/scripts.min.js"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="//www.danstools.com/js/forum.js"></script> <script type="text/javascript"> $(function(){ $('iframe.new-preview').each(function() { previewportWidth = $(this).parent().innerWidth()-15; factor = previewportWidth/1200; console.log(factor); $(this).css({ 'height': '800px', 'width': '1200px', '-ms-zoom': factor, '-ms-transform': 'scale('+factor+')', 'transform': 'scale('+factor+')', '-moz-transform': 'scale('+factor+')', '-moz-transform-origin': '0 0', '-o-transform': 'scale('+factor+')', '-o-transform-origin': '0 0', '-webkit-transform': 'scale('+factor+')', '-webkit-transform-origin': '0 0' }); $(this).parent().css('height',$(this).parent().innerWidth()*.75); }); $('iframe.snippet-preview').each(function() { previewportWidth = $(this).parent().parent().innerWidth()-30; $(this).zoomer({ width: previewportWidth, height: $(this).parent().innerWidth()*.75, zoom: .5, message : '' ,messageURL : $(this).attr('data-url') }) $(this).zoomer('refresh'); }); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script> <script type="text/javascript"> (function($) { window.addEventListener('message', receiveMessage, false); function receiveMessage(evt) { if (evt.origin !== 'https://bootsnipp.com') return; if ((evt.data != undefined) && (evt.data) && (typeof evt.data === "number")) if(evt.data >= 500) { // $('#playground-container').css('height', evt.data+30+'px'); } } var version = '2.3.2'; var version_jq = '1.11.1'; var htmleditor = ace.edit("editor-html"); var jseditor = ace.edit("editor-js"); var csseditor = ace.edit("editor-css"); $('#theme_chooser').change(function(){ whichCSS = $(this).val(); document.getElementById('snippet-preview').contentWindow.changeCSS(whichCSS); }); function setEditorOptions(editor, type){ editor.setTheme("ace/theme/clouds"); editor.setHighlightActiveLine(false); // editor.setReadOnly(true); editor.getSession().setMode("ace/mode/"+type); }; setEditorOptions(htmleditor,'html'); setEditorOptions(jseditor,'javascript'); setEditorOptions(csseditor,'css'); function markActive(el) { $(el).siblings().removeClass('active'); $(el).addClass('active'); } $('#show-html').click(function(e){ e.preventDefault(); $('#editor-html').show().siblings().hide(); markActive(this); $('#preview-container').hide(); htmleditor.resize(); }); $('#show-js').click(function(e){ e.preventDefault(); $('#editor-js').show().siblings().hide(); $('#preview-container').hide(); markActive(this); jseditor.resize(); }); $('#show-css').click(function(e){ e.preventDefault(); $('#editor-css').show().siblings().hide(); $('#preview-container').hide(); markActive(this); csseditor.resize(); }); $('#show-preview').click(function(e){ e.preventDefault(); markActive(this); $('.playground-editor').hide(); var html = buildSource(htmleditor, jseditor, csseditor); var iframe = document.createElement('iframe'); iframe.src = 'about:blank'; iframe.frameBorder="0"; iframe.height = 496; iframe.className = 'preview-iframe'; $('.preview-iframe').remove(); $('div#preview-container').append(iframe); iframe.contentWindow.document.open('text/html', 'replace'); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); $('#preview-container').show(); }); var cssurls = {}; var jsurls = {}; var jqurls = {}; cssurls['4.1.1'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'; jsurls['4.1.1'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'; cssurls['4.0.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; jsurls['4.0.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'; cssurls['3.3.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'; jsurls['3.3.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'; cssurls['3.2.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'; jsurls['3.2.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'; cssurls['3.1.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'; jsurls['3.1.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'; cssurls['3.0.3'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'; jsurls['3.0.3'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'; cssurls['3.0.1'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css'; jsurls['3.0.1'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js'; cssurls['3.0.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'; jsurls['3.0.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'; cssurls['2.3.2'] = '//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'; jsurls['2.3.2'] = '//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'; jqurls['3.2.1'] = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'; jqurls['2.2.4'] = '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'; jqurls['1.11.1'] = '//code.jquery.com/jquery-1.11.1.min.js'; function buildSource(htmleditor, jseditor, csseditor) { var code = {}; code.html = htmleditor.getValue(); code.css = csseditor.getValue(); code.js = jseditor.getValue(); code.bootstrapcss = cssurls[version]; code.bootstrapjs = jsurls[version]; code.jqueryurl = jqurls[version_jq]; var template = "<!doctype html>\n\ <html>\n\ <head>\n\ <meta charset='utf-8'>\n\ <meta name='viewport' content='width=device-width, initial-scale=1'>\n\ <title>Snippet - Bootsnipp.com</title>\n\ <link href='|bootstrapcss|' rel='stylesheet'>\n\ <style>|css|\x3C/style>\n\ \x3Cscript type='text/javascript' src='|jqueryurl|'>\x3C/script>\n\ \x3Cscript type='text/javascript' src='|bootstrapjs|'>\x3C/script>\n\ \x3Cscript type='text/javascript'>|js|\x3C/script>\n\ </head>\n\ <body>\n\ |html|\n\ </body>\n\ </html>"; content = template.replace(/\|(\w+)\|/g, function(match, str) { if(str in code) return code[str]; return ''; }); return content; } })(jQuery); </script> <div class="modal fade" id="DonateModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:100px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Donate</h1> </div> <div class="modal-body text-center">  <br>BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT <br>ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76 <hr> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="FDGD82NBKQDHJ"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Bootstrap Snippet Dynamic Form Fields - Add & Remove using HTML CSS jQuery