"Dynamic form fields - Add new field on focus or change"
Bootstrap 3.1.0 Snippet by champakad

<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 class="container"> <h3>Selects</h3> <div class="row"> <div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4"> <div class="input-group input-group-multiple-select col-xs-12"> <select id="state" name="state" style="width: 212px;" onclick='test()'> <option value="nsw">New South Wales</option> <option value="qld">Queensland</option> <option value="vic">Victoria</option> <option value="nt">Northern Territory</option> <option value="tas">Tasmania</option> <option value="sa">South Australia</option> <option value="wa">Western Australia</option> <option value="act">Australian Capital Territory</option> <option value="notinoz">Not in Australia</option> </select> <select id="extra" name="extra" style="display: none"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <span class="input-group-addon input-group-addon-remove"> <span class="glyphicon glyphicon-remove"></span> </span> </div> </div> </div> </div>
/* Text fields */ 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; } /* Selects */ div.input-group-multiple-select:last-child span.input-group-addon-remove{ display: none; } div.input-group-multiple-select:last-child input.form-control{ border-bottom-right-radius: 3px; border-top-right-radius: 3px; } div.input-group-multiple-select span.input-group-addon-remove{ cursor: pointer; background: none; border: none; } div.input-group-multiple-select{ margin-bottom: 5px; }
/* Selects */ $(function(){ var values = new Array(); $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function(){ var selectsLength = $('.form-group-multiple-selects .input-group-multiple-select select').length; var optionsLength = ($(this).find('option').length)-1; if(selectsLength < optionsLength){ var sInputGroupHtml = $(this).parent().html(); var sInputGroupClasses = $(this).parent().attr('class'); $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>'); } // updateValues(); }); $(document).on('click', '.input-group-addon-remove', function(){ $(this).parent().remove(); updateValues(); }); });

Related: See More


Questions / Comments: