In this post we will see how to add and delete fields dynamically with jquery, normally in a project we give options to users to add several rows and send them to the database, here I am creating a functionality to add and delete a static row. I will not show server code to store data in the database, I'm just helping you add a dynamic row in the HTML container.
Other post:
- How to export data from HTML tables to Excel, CSV, PNG and PDF with jQuery
- FullScreen menu design with CSS
- How to validate that the password that your users capture is strength with jQuery?
Now you can copy the complete example to make tests on your computer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title> Dynamic Add Controls HTML</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="container" style="min-height:650px;">
<div style='margin-bottom:100px'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive-header -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5044208028083716"
data-ad-slot="8330817881"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="col-sm-8"><h1>Source code: Dynamic Add Row</h1></div>
<div class="col-sm-8" id="container2">
<div id="type_container">
<div class="row form-group" id="edit-0">
<div class="col-md-2 control-label">
<label for="username" class="control-label">
Brand :
</label>
</div>
<div class="col-md-3">
<select data-placeholder="Choose an Type..." class="form-control" name="">
<option disabled="disabled" selected="selected" value="0">Select</option>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</div>
<div class="col-md-2 control-label">
<label for="username" class="control-label">
Point :
</label>
</div>
<div class="col-md-5 clearfix">
<div class="row col-md-3">
<input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
</div>
<div class="col-md-3 control-label">
<a class="add-type pull-right" href="javascript: void(0)" tiitle="Click to add more"><i class="glyphicon glyphicon-plus-sign"></i></a>
</div>
</div>
</div>
</div>
<div id="type-container" class="hide">
<div class="row form-group type-row" id="">
<div class="col-md-2 control-label">
<label for="username" class="control-label">
Brand :
</label>
</div>
<div class="col-md-3">
<select data-placeholder="Choose an Type..." class="form-control" name="">
<option disabled="disabled" selected="selected" value="0">Select</option>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</div>
<div class="col-md-2 control-label">
<label for="username" class="control-label">
Point :
</label>
</div>
<div class="col-md-5 clearfix">
<div class="row col-md-3">
<input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
</div>
<div class="col-md-3 control-label"><a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)"><i class="glyphicon glyphicon-trash"></i></a></div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function () {
var doc = $(document);
jQuery('a.add-type').die('click').live('click', function (e) {
e.preventDefault();
var content = jQuery('#type-container .type-row'),
element = null;
for (var i = 0; i < 1; i++) {
element = content.clone();
var type_div = 'teams_' + jQuery.now();
element.attr('id', type_div);
element.find('.remove-type').attr('targetDiv', type_div);
element.appendTo('#type_container');
}
});
jQuery(".remove-type").die('click').live('click', function (e) {
var didConfirm = confirm("Are you sure You want to delete");
if (didConfirm == true) {
var id = jQuery(this).attr('data-id');
var targetDiv = jQuery(this).attr('targetDiv');
//if (id == 0) {
//var trID = jQuery(this).parents("tr").attr('id');
jQuery('#' + targetDiv).remove();
// }
return true;
} else {
return false;
}
});
});
</script>
</div>
</body>
</html>
