"dynamic add remove fields enhanced"
Bootstrap 3.0.0 Snippet by mubashirsiddique

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="row"> <form id="surveyForm" class="form-horizontal"> <!-- The option field template containing an option field and a Remove button --> <div class="form-group hide" id="optionTemplate"> <div class="col-xs-offset-3 col-xs-5"> <input class="form-control" type="text" name="option[]" /> </div> <div class="col-xs-4"> <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button> </div> </div> </form> </div> </div>
$(document).ready(function() { // The maximum number of options var MAX_OPTIONS = 10; $('#surveyForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { question: { validators: { notEmpty: { message: 'The question required and cannot be empty' } } }, 'option[]': { validators: { notEmpty: { message: 'The option required and cannot be empty' }, stringLength: { max: 100, message: 'The option must be less than 100 characters long' } } } } }) // Add button click handler .on('click', '.addButton', function() { var $template = $('#optionTemplate'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .insertBefore($template), $option = $clone.find('[name="option[]"]'); // Add new field $('#surveyForm').formValidation('addField', $option); }) // Remove button click handler .on('click', '.removeButton', function() { var $row = $(this).parents('.form-group'), $option = $row.find('[name="option[]"]'); // Remove element containing the option $row.remove(); // Remove field $('#surveyForm').formValidation('removeField', $option); }) // Called after adding new field .on('added.field.fv', function(e, data) { // data.field --> The field name // data.element --> The new field element // data.options --> The new field options if (data.field === 'option[]') { if ($('#surveyForm').find(':visible[name="option[]"]').length >= MAX_OPTIONS) { $('#surveyForm').find('.addButton').attr('disabled', 'disabled'); } } }) // Called after removing the field .on('removed.field.fv', function(e, data) { if (data.field === 'option[]') { if ($('#surveyForm').find(':visible[name="option[]"]').length < MAX_OPTIONS) { $('#surveyForm').find('.addButton').removeAttr('disabled'); } } }); });

Related: See More


Questions / Comments: