<!doctype html>
<html lang="en">
<head>
<title>Add or Remove Input Fields Dynamically</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.btn_round_pk {
width: 35px;
height: 35px;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 35px;
margin-left: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.btn_round_pk:hover {
color: #fff;
background: #6b4acc;
border: 1px solid #6b4acc;
}
.btn_content_outer_pk {
display: inline-block;
width: 85%;
}
.close_c_btn_pk {
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 0px;
line-height: 30px;
border-radius: 50%;
background: #ededed;
border: 1px solid #ccc;
color: #ff5c5c;
text-align: center;
cursor: pointer;
}
.add_icon_pk {
padding: 10px;
border: 1px dashed #aaa;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
}
.add_group_btn_pk {
display: flex;
}
.add_group_btn_pk i {
font-size: 32px;
display: inline-block;
margin-right: 10px;
}
.add_group_btn_pk span {
margin-top: 8px;
}
.add_group_btn_pk,
.clone_sub_task_pk {
cursor: pointer;
}
.sub_task_append_area_pk .custom_square_pk {
cursor: move;
}
.del_btn_d_pk {
display: inline-block;
position: absolute;
right: 20px;
border: 2px solid #ccc;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-md-12 form_sec_outer_task border">
<div class="row">
<div class="col-md-12 bg-light p-2 mb-3">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<h4 class="frm_section_n_pk">Form Title</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label>Mobile No.</label>
</div>
<div class="col-md-4">
<label> Type </label>
</div>
</div>
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0">
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_1_pk"
placeholder="Enter mobile no." />
</div>
<div class="form-group col-md-3">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_1_pk"
placeholder="Enter mobile no." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1_pk" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer_pk">
<button class="btn_round_pk add_node_btn_frm_field_pk" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round_pk remove_node_btn_frm_field_pk" disabled>
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row ml-0 bg-light mt-3 border py-3">
<div class="col-md-12">
<button class="btn btn-outline-lite py-0 add_new_frm_field_btn_pk"><i class="fas fa-plus add_icon_pk"></i> Add New field row</button>
</div>
</div>
</div>
</div>
</body>
<script>
///======Clone method
$(document).ready(function () {
$("body").on("click", ".add_node_btn_frm_field_pk", function (e) {
var index = $(e.target).closest(".form_field_outer").find(".form_field_outer_row").length + 1;
var cloned_el = $(e.target).closest(".form_field_outer_row").clone(true);
$(e.target).closest(".form_field_outer").last().append(cloned_el).find(".remove_node_btn_frm_field_pk:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer").find(".remove_node_btn_frm_field_pk").first().prop("disabled", true);
//change id
$(e.target)
.closest(".form_field_outer")
.find(".form_field_outer_row")
.last()
.find("input[type='text']")
.attr("id", "mobileb_no_" + index + "_pk");
$(e.target)
.closest(".form_field_outer")
.find(".form_field_outer_row")
.last()
.find("select")
.attr("id", "no_type_" + index + "_pk");
console.log(cloned_el);
//count++;
});
});
$(document).ready(function () {
$("body").on("click", ".add_new_frm_field_btn_pk", function () {
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(`
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}_pk"
placeholder="Enter mobile no." />
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}_pk"
placeholder="Enter mobile no." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}_pk" class="form-control">
<option>--Select type--</option>
<option>Personal No.</option>
<option>Company No.</option>
<option>Parents No.</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer_pk">
<button class="btn_round_pk add_node_btn_frm_field_pk" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round_pk remove_node_btn_frm_field_pk" disabled>
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field_pk:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field_pk").first().prop("disabled", true);
});
});
$(document).ready(function () {
//===== delete the form fieed row
$("body").on("click", ".remove_node_btn_frm_field_pk", function () {
$(this).closest(".form_field_outer_row").remove();
console.log("success");
});
});
</script>
</html>
0 Comments