'Add or remove input controls on the fly using jQuery,Bootstrap
I was going through the code given in this link, for adding input controls like textboxes, dropdown lists etc in my form.
but when i tried to modify, the code, with addition of new dropdownlists, am not getting the results properly. Alignment was wrong and label is not coming as expected. here is my updated code
<div class="col-md-6">
<label> entity name </label>
</div>
<div class="col-md-4">
<label> Operator </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"
placeholder="Enter entity name." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select Field Name--</option>
<option>--state1--</option>
<option>--state2--</option>
<option>--state3--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option>--Select attribute --</option>
<option>--attributes1--</option>
<option>--attributes2--</option>
</select>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" class="form-control" >
<option> --Select entity -- </option>
<option> entity1 </option>
<option> entity2 </option>
</select>
</div>
my requirement is to add 3 more dropdown lists and 2 checkboxes. but when I tried to add the dropdown lists/ label titles , am getting those in a unexpected results.
in order to get the correctly aligned form controls - with proper titles, etc where n which tags i need to modify?
Solution 1:[1]
I think you didn't add cdn's in your code. You can also take the code from here
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", 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}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control w_90" name="mobileb_no[]" id="mobileb_no_${index}" placeholder="Enter mobiel no." />
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_${index}" 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-4">
<select name="no_type[]" id="no_type_${index}" 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">
<button class="btn_round add_node_btn_frm_field" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
///======Clone method
$(document).ready(function(){
$("body").on("click", ".add_node_btn_frm_field", 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:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer").find(".remove_node_btn_frm_field").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);
$(e.target).closest(".form_field_outer").find(".form_field_outer_row").last().find("select").attr("id", "no_type_"+index);
console.log(cloned_el);
//count++;
});
});
$(document).ready(function(){
//===== delete the form fieed row
$("body").on("click", ".remove_node_btn_frm_field", function () {
$(this).closest(".form_field_outer_row").remove();
console.log("success");
});
});.btn_round {
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:hover {
color: #fff;
background: #6b4acc;
border: 1px solid #6b4acc;
}
.btn_content_outer {
display: inline-block;
width: 85%;
}
.close_c_btn {
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 0;
line-height: 30px;
border-radius: 50%;
background: #ededed;
border: 1px solid #ccc;
color: #ff5c5c;
text-align: center;
cursor: pointer;
}
.add_icon {
padding: 10px;
border: 1px dashed #aaa;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
}
.add_group_btn {
display: flex;
}
.add_group_btn i {
font-size: 32px;
display: inline-block;
margin-right: 10px;
}
.add_group_btn span {
margin-top: 8px;
}
.add_group_btn,
.clone_sub_task {
cursor: pointer;
}
.sub_task_append_area .custom_square {
cursor: move;
}
.del_btn_d {
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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="static/css/AdminLTE.min.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<title>
Dynamically add or remove form input fields using jQuery -
bootstrapfriendly
</title>
</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">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"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-6">
<input
type="text"
class="form-control w_90"
name="mobileb_no[]"
id="mobileb_no_1"
placeholder="Enter mobiel no."
/>
</div>
<div class="form-group col-md-4">
<select name="no_type[]" id="no_type_1" 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-4">
<select name="no_type[]" id="no_type_1" 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">
<button
class="btn_round add_node_btn_frm_field"
title="Copy or clone this row"
>
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button>
<input style="margin-left:10px;" type="checkbox" id="checkbox1" value="Checkbox1">
<label for="checkbox1"> Checkbox1</label>
</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">
<i class="fas fa-plus add_icon"></i> Add New field row
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 pt-4"></div>
</div>
</div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |