"Add more dynamically"
Bootstrap 3.3.0 Snippet by meherulsust

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <h2>Html Form</h2> <div class="panel-body"> <form action="" > <div class="input-group control-group after-add-more"> <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here"> <div class="input-group-btn"> <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button> </div> </div> </form> <!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,--> <div class="copy-fields hide"> <div class="control-group input-group" style="margin-top:10px"> <input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here"> <div class="input-group-btn"> <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button> </div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { //here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class. $(".add-more").click(function(){ var html = $(".copy-fields").html(); $(".after-add-more").after(html); }); //here it will remove the current value of the remove button which has been pressed $("body").on("click",".remove",function(){ $(this).parents(".control-group").remove(); }); }); </script>

Related: See More


Questions / Comments:

How Can i increment in the addmore array in the name attribute (name="addmore[ ]") ?

AbdulRauf1132 () - 6 years ago - Reply 0