<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- panel preview --> <div class="col-sm-5"> <h4>Dodaj zapažanje:</h4> <div class="panel panel-default"> <div class="panel-body form-horizontal payment-form"> <div class="form-group"> <label for="concept" class="col-sm-3 control-label">Naslov</label> <div class="col-sm-9"> <input type="text" class="form-control" id="concept" name="concept"> </div> </div> <div class="form-group"> <label for="description" class="col-sm-3 control-label">Opis</label> <div class="col-sm-9"> <textarea type="text" class="form-control" id="description" name="description"></textarea> </div> </div> <div class="form-group"> <label for="status" class="col-sm-3 control-label">Značaj</label> <div class="col-sm-9"> <a href="javascript:Option('low')" class="btn btn-success"><span class="glyphicon glyphicon-bell"></span>Nizak</a> <a href="javascript:Option('medium')" class="btn btn-warning"><span class="glyphicon glyphicon-bell"></span>Srednji</a> <a href="javascript:Option('high')" class="btn btn-danger"><span class="glyphicon glyphicon-bell"></span>Visok</a> </div> </div> <div class="form-group"> <label for="date" class="col-sm-3 control-label">Datum</label> <div class="col-sm-9"> <input type="date" class="form-control" id="date" name="date"> </div> </div> <div class="form-group"> <div class="col-sm-12 text-right"> <button type="button" class="btn btn-default preview-add-button"> <span class="glyphicon glyphicon-plus"></span> Dodaj </button> </div> </div> </div> </div> </div> <!-- / panel preview --> <div class="col-sm-7"> <h4>Dodano:</h4> <div class="row"> <div class="col-xs-12"> <div class="table-responsive"> <table class="table preview-table"> <thead> <tr> <th>Naslov</th> <th>Opis</th> <th>Značaj</th> <th>Datum</th> </tr> </thead> <tbody></tbody> <!-- preview content goes here--> </table> </div> </div> </div> <div class="row text-right"> <div class="col-xs-12"> <h4>Total: <strong><span class="preview-total"></span></strong></h4> </div> </div> <div class="row"> <div class="col-xs-12"> <hr style="border:1px dashed #dddddd;"> <button type="button" class="btn btn-primary btn-block">Spasi</button> </div> </div> </div> </div> </div>

var sum = 0; function calc_total(){ $(".preview-total").text(sum); } var optionSelected='<a href="#" class="btn btn-success"><span class="glyphicon glyphicon-bell"></span></a>'; $(document).on('click', '.input-remove-row', function(){ var tr = $(this).closest('tr'); tr.fadeOut(200, function(){ tr.remove(); sum = sum - 1; calc_total() }); }); function Option(value) { switch(value) { case 'low': optionSelected = '<a href="#" class="btn btn-success"><span class="glyphicon glyphicon-bell"></span>Nizak</a>'; break; case 'medium': optionSelected = '<a href="#" class="btn btn-warning"><span class="glyphicon glyphicon-bell"></span>Srednji</a>'; break; case 'high' : optionSelected = '<a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-bell"></span>Visok</a>'; break; } } $(document).on('click', '.input-remove-row', function(){ var tr = $(this).closest('tr'); tr.fadeOut(200, function(){ tr.remove(); calc_total() }); }); $(function(){ $('.preview-add-button').click(function(){ var form_data = {}; form_data["concept"] = $('.payment-form input[name="concept"]').val(); form_data["description"] = $('.payment-form textarea[name="description"]').val(); form_data["status"] = optionSelected; form_data["date"] = $('.payment-form input[name="date"]').val(); form_data["remove-row"] = '<span class="glyphicon glyphicon-remove"></span>'; var row = $('<tr></tr>'); $.each(form_data, function( type, value ) { $('<td class="input-'+type+'"></td>').html(value).appendTo(row); }); $('.preview-table > tbody:last').append(row); sum = sum + 1; calc_total(); }); });