"Dynamic form fields - Add new field on focus"
Bootstrap 3.1.0 Snippet by drchiu

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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"> <h3>Fields</h3> <div class="row"> <div class="form-group form-group-options col-xs-11 col-sm-8 col-md-4 "> <div class="input-group input-group-option col-xs-12"> <input type="text" name="option[]" class="form-control" placeholder="Focus me"> <span class="input-group-addon input-group-addon-remove"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> </div>
div.input-group-option:last-child span.input-group-addon-remove{ display: none; } div.input-group-option:last-child input.form-control{ border-bottom-right-radius: 3px; border-top-right-radius: 3px; } div.input-group-option span.input-group-addon-remove{ cursor: pointer; } div.input-group-option{ margin-bottom: 3px; }
$(function(){ $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){ var sInputGroupHtml = $(this).parent().html(); var sInputGroupClasses = $(this).parent().attr('class'); $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>'); }); $(document).on('click', '.input-group-addon-remove', function(){ $(this).parent().remove(); }); });

Related: See More


Questions / Comments: