Add / remove input field dynamically with jQuery ( PHP )

Multiple Input fields

HTML Code:

    
                            <div class="form-submit">
                                <h3>Apartments Price</h3>
                                <div class="submit-section field_wrapper" >
                                   <div id="tab_logic" class="input_fields_wrap">
                                    <div class="row">
                                        <div class="form-group col-md-3">
                                            <label>Unit Type </label>
                                            <input type="text" class="form-control" name="UnitTypeAP[]" value="<?php echo set_value('UnitType1BHK');?>" required>
                                          
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Size in Sq.Ft </label>
                                            <input type="text" class="form-control" name="SizeInSQAP[]" value="<?php echo set_value('UnitType2BHK');?>" required>
                                            
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Approx. All Inclusive Price </label>
                                            <input type="text" class="form-control" name="ApproxPAP[]" value="<?php echo set_value('UnitType2BHK');?>" required>
                                          
                                        </div>

                                        <div class="form-group col-md-3">
                                           <div class="form-group change">
                                            <label for="">&nbsp;</label><br />
                                               <button class="btn btn-success add_field_button">Add More Apartments</button>
<!--                                             <button class="btn btn-success add_field_button">+ Add More</button>-->
                                          
                                            </div>
                                        </div>



                                    </div>
                                
                                    
                                    </div>
                                    
                                    
                                </div>
                            </div>

JavaScript Code:


    
    $(document).ready(function() {
	var max_fields      = 10; //maximum input boxes allowed
	var wrapper   		= $(".input_fields_wrap"); //Fields wrapper
	var add_button      = $(".add_field_button"); //Add button ID
	
	var x = 1; //initlal text box count
	$(add_button).click(function(e){ //on add input button click
		e.preventDefault();
		if(x < max_fields){ //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div class="row" id="rowDiv"><div class="form-group col-md-3"><label>Unit Type </label> <input type="text" class="form-control" name="UnitTypeAP[]" required ></div><div class="form-group col-md-3"><label>Size in Sq.Ft </label><input type="text" class="form-control" name="SizeInSQAP[]" required> </div><div class="form-group col-md-3"><label>Approx. All Inclusive Price </label><input type="text" class="form-control" name="ApproxPAP[]" required></div><div class="form-group col-md-3"><div class="form-group change"><label for="">&nbsp;</label><br /><button class="btn btn-danger remove_field"> Remove</button></div></div></div>'); //add input box
		}
	});
	
         $(wrapper).on("click", ".remove_field", function () {
            $(this).parents("#rowDiv").remove();x--;
        })
        

});
    

Output:

Input Type = File

Html Code:

   <div class="row">
                                    <div class="form-group col-md-6">
                                        <label>Upload Gallery</label>



                                        <div class="mb-3 input-group repeatDiv" id="repeatDiv">
                                            <input type="file" class="form-control" name="uploadfile[]" required>
                                        </div>
                                        <button type="button" class="btn btn-success" id="repeatDivBtn" data-increment="1">Add More Images</button>





                                    </div>

                                </div>

Javascript Code:


$(document).ready(function () {

$("#repeatDivBtn").click(function () {

$newid = $(this).data("increment");
$repeatDiv = $("#repeatDiv").wrap('
<div />').parent().html();
$('#repeatDiv').unwrap();
$($repeatDiv).insertAfter($(".repeatDiv").last());
$(".repeatDiv").last().attr('id', "repeatDiv" + '_' + $newid);
$("#repeatDiv" + '_' + $newid).append('<div class="input-group-append"><button type="button" class="btn btn-danger removeDivBtn" data-id="repeatDiv'+'_'+ $newid+'">Remove</button></div>');
$newid++;
$(this).data("increment", $newid);

});


$(document).on('click', '.removeDivBtn', function () {

$divId = $(this).data("id");
$("#"+$divId).remove();
$inc = $("#repeatDivBtn").data("increment");
$("#repeatDivBtn").data("increment", $inc-1);

});

});

Result:

Leave a Reply

Your email address will not be published. Required fields are marked *