How to add a div with bootstrap form elements dynamically?
Posted By: Anonymous
This is my JS fiddle : Demo
I have tried using the below JS code to dynamically replicate the form
elements within the box (Expression LHS, RHS, Operator, Datatype)
However, it did not work.
Could someone help me with this? Also, I will have to write it using Vue.js once I find help with Javascript/jQuery.
Any help would be much appreciated! Thank you!
$('#addRow').click(function () {
$('<div/>', {
'class' : 'child-border', html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
});
function GetHtml()
{
var len = $('.child-border').length;
var $html = $('.parent-border').clone();
$html.find('[name=lhs]')[0].name="lhs" + len;
$html.find('[name=rhs]')[0].name="rhs" + len;
$html.find('[name=data]')[0].name="data" + len;
$html.find('[name=op]')[0].name="op" + len;
return $html.html();
}
Solution
You can simplify everything:
- clone parent-border
- for each input element change the name and id
- toggle the class from parent-border to child-border and append.
Remember: IDs must be unique and for each field to ajax it’s required a name.
_x000D_
_x000D_
$('#deleteRow').closest('.form-group').hide();_x000D_
$('#addRow').on('click', function (e) {_x000D_
var len = $('.child-border').length;_x000D_
$('.parent-border').clone().find(':input').each(function (idx, ele) {_x000D_
ele.name = ele.name + len;_x000D_
ele.id = ele.id + len;_x000D_
ele.value = '';_x000D_
}).end().find('.form-group').toggle(true).end()_x000D_
.toggleClass('parent-border child-border').hide()_x000D_
.appendTo('#container').slideDown('slow');_x000D_
});_x000D_
_x000D_
$('button.btn:contains("Save")').on('click', function (e) {_x000D_
var jsonData = $('form.form-horizontal')_x000D_
.find(':input:not(button)').get()_x000D_
.reduce(function (acc, ele) {_x000D_
acc[ele.name || ele.id] = ele.value;_x000D_
return acc;_x000D_
}, {});_x000D_
console.log(jsonData);_x000D_
});_x000D_
_x000D_
$('#container').on('click', '[id^=deleteRow]', function(e) {_x000D_
var jsonData = $(this).closest('.child-border, .parent-border')_x000D_
.find(':input:not(button)').get()_x000D_
.reduce(function (acc, ele) {_x000D_
acc[ele.name || ele.id] = ele.value;_x000D_
return acc;_x000D_
}, {});_x000D_
$(this).closest('.child-border, .parent-border').remove();_x000D_
console.log(jsonData);_x000D_
});_x000D_
.navbar-nav li {_x000D_
margin-top: 8px;_x000D_
margin-bottom: 8px;_x000D_
}_x000D_
.tabs-container {_x000D_
margin-top: 100px;_x000D_
}_x000D_
.parent-border, .child-border {_x000D_
border: 1px solid #CCC;_x000D_
border-radius: 4px;_x000D_
padding: 15px;_x000D_
margin-bottom: 15px;_x000D_
}_x000D_
.btn-circle.btn-lg {_x000D_
width: 50px;_x000D_
height: 50px;_x000D_
padding: 10px 16px;_x000D_
font-size: 18px;_x000D_
line-height: 1.33;_x000D_
border-radius: 25px;_x000D_
}_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
<nav class="navbar navbar-inverse navbar-fixed-top">_x000D_
<div class="container">_x000D_
<div class="navbar-header pull-right">_x000D_
<ul class="nav navbar-nav">_x000D_
<li>_x000D_
<button class="btn btn-md btn-success">Login</button>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</nav>_x000D_
<div class="container">_x000D_
<div class="row tabs-container">_x000D_
<div class="col-sm-offset-2 col-sm-8">_x000D_
<div class="panel with-nav-tabs panel-default">_x000D_
<div class="panel-heading">_x000D_
<ul class="nav nav-tabs">_x000D_
<li class="active"><a href="#tab1default" data-toggle="tab">Rules</a></li>_x000D_
<li><a href="#tab2default" data-toggle="tab">Events</a></li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="panel-body">_x000D_
<div class="tab-content">_x000D_
<div class="tab-pane fade in active" id="tab1default">_x000D_
<form class="form-horizontal">_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="name">Name:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<input type="text" class="form-control" id="name" name="name"_x000D_
placeholder="Enter name">_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Type:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<select class="form-control" id="type1" name="type1">_x000D_
<option>Type1</option>_x000D_
<option>Type2</option>_x000D_
<option>Type3</option>_x000D_
<option>Type4</option>_x000D_
</select>_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Description:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ_x000D_
</textarea>_x000D_
</div>_x000D_
</div>_x000D_
<div class="parent-border col-sm-offset-2 col-sm-10">_x000D_
<div class="form-group">_x000D_
<div class="col-sm-offset-10">_x000D_
<button type="button" id="deleteRow" class="btn btn-success btn-circle btn-lg"><i_x000D_
class="glyphicon glyphicon glyphicon-trash"></i></button>_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Expression LHS:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<input type="text" class="form-control" id="elhs" name="elhs"_x000D_
placeholder="Enter LHS"_x000D_
name="lhs">_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Operator</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<select class="form-control" id="op" name="op">_x000D_
<option><=</option>_x000D_
<option>>=</option>_x000D_
<option>!==</option>_x000D_
<option><</option>_x000D_
<option>></option>_x000D_
<option>==</option>_x000D_
</select>_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="erhs">Expression RHS:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<input type="text" class="form-control" id="erhs" name="erhs"_x000D_
placeholder="Enter RHS"_x000D_
name="rhs">_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Datatype:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<input type="text" class="form-control" id="datatype" name="datatype"_x000D_
placeholder="Enter datatype" name="datatype">_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<div id="container">_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<div class="col-sm-offset-6">_x000D_
<button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"><i_x000D_
class="glyphicon glyphicon-plus"></i></button>_x000D_
</div>_x000D_
</div>_x000D_
</form>_x000D_
</div>_x000D_
<div class="tab-pane fade" id="tab2default">_x000D_
<form class="form-horizontal">_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="name1">Name:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<input type="text" class="form-control" id="name1" name="name1"_x000D_
placeholder="Enter name">_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Type:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<select class="form-control" id="type" name="type">_x000D_
<option>Type1</option>_x000D_
<option>Type2</option>_x000D_
<option>Type3</option>_x000D_
<option>Type4</option>_x000D_
</select>_x000D_
</div>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
<label class="control-label col-sm-2" for="type">Description:</label>_x000D_
_x000D_
<div class="col-sm-10">_x000D_
<textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ_x000D_
</textarea>_x000D_
</div>_x000D_
</div>_x000D_
</form>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<!-- /.container -->_x000D_
<div class="navbar navbar-inverse navbar-fixed-bottom">_x000D_
<div class="container">_x000D_
<div class="navbar-footer pull-right">_x000D_
<ul class="nav navbar-nav">_x000D_
<li>_x000D_
<button class="btn btn-md btn-success">Save</button>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
_x000D_
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
