jquery - Dynamically add and remove form elements within the group -
i have form , trying generate multiple input form element , remove remove button. generated form element has other set of form elements can added , removed separately. when click 'add wall' on new generated elements adding getting on first section only. should added , removed in same section 'add wall' here code have tried
https://jsfiddle.net/m20w0p1p/
<!-- begin form--> <div class="form-body"> <div class="control-group" id="fields"> <div class="controls"> <form role="form" autocomplete="off" method="post" id="voilation"> <div class="form-group"> <label>title</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-envelope"></i> </span> <input type="text" name="title"> </div> </div> <div class="entry input-group col-md-12"> <div class="col-md-2"> <div class="form-group"> <label>floor</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="floor[]" type="text" placeholder="floor" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>wall/celing</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="celing[]" value="celing" type="text" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>length</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="length[]" type="text" placeholder="length" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>height</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="breadth[]" type="text" placeholder="breadth" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>thickness</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="material[]" type="text" placeholder="material" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label></label> <div class="input-group"> <input class="form-control" name="thickness[]" type="hidden" placeholder="thickness" /> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="">add</span> </button> </span> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label></label> <div class="input-group"> <input class="form-control" name="wall[]" type="hidden" placeholder="wall" /> </div> </div> </div> <div class="subcontrol"> <div class="section"> <div class="subentry input-group col-md-12"> <div class="col-md-2"> <div class="form-group"> <label></label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="wall[]" value="wall" type="text" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>length</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="wall_length[]" placeholder="length" type="text" /> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>height</label> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-street-view"></i> </span> <input class="form-control" name="height[]" type="text" placeholder="height" /> <span class="input-group-btn"> <button class="btn btn-success btn-add-wall" type="button"> <span class="">add wall</span> </button> </span> </div> </div> </div> </div> </div> </div> </div> <div class="form-actions left"> <button type="submit" class="btn green"><i class="fa fa-check"></i> submit</button> </div> </form> <!-- end form--> $(document).on('click', '.btn-add', function (e) { e.preventdefault(); var controlform = $('.controls form:first'), currententry = $(this).parents('.entry:first'), newentry = $(currententry.clone()).appendto(controlform); newentry.find('input').val(''); controlform.find('.entry:not(:last) .btn-add') .removeclass('btn-add').addclass('btn-remove') .removeclass('btn-success').addclass('btn-danger') .html('<span class="glyphicon glyphicon-minus">remove floor</span>'); }).on('click', '.btn-remove', function (e) { $(this).parents('.entry:first').remove(); e.preventdefault(); return false; }); //add wall $(document).on('click', '.btn-add-wall', function (e) { e.preventdefault(); var controlform = $('.subcontrol').first(), currententry = $(this).parents('.subentry:last'), newentry = $(currententry.clone()).appendto(controlform); newentry.find('input').val(''); controlform.find('.subentry:not(:last) .btn-add-wall') .removeclass('btn-add-wall').addclass('btn-remove-wall') .removeclass('btn-success').addclass('btn-danger') .html('<span class="glyphicon glyphicon-minus">remove wall</span>'); }).on('click', '.btn-remove-wall', function (e) { $(this).parents('.subentry:first').remove(); e.preventdefault(); return false; });
Comments
Post a Comment