"offer calculator "
Bootstrap 3.3.0 Snippet by shashibeit

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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" align="center" top="20">
<div class="offer-container">
<div class="panel panel-primary" align="center">
<div class="panel-heading">
<h2>
<i class="fa fa-calculator"></i>Check for Current Offers</h2>
</div>
<div class="panel-body">
<div class="col-md-8">
<div class="table-responsive">
<table class="table table-striped plansTable">
<thead>
<tr>
<th>
Amount
</th>
<th>
Quantity
</th>
<th>
Product
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="checkbox"><label> <input class="chkbtn_Scheme" onchange="chkbtn_Scheme_Change(this)" name="chkbtn_Scheme" id="checkbox1" value="" type="checkbox"><i class="fa fa-inr"></i> 1000</label></div></td>
<td>
<div class="center">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-default btn-number " onclick="OnChangeCountButton(this)" data-type="minus" data-field="quant[1]"><span class="glyphicon glyphicon-minus"></span></button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body
{
background-color: #D3D3D3;
}
a:hover, a:active, a:focus
{
outline: 0;
}
button:focus
{
outline: 0;
}
.offer-container
{
width: 720px;
margin-top: 7%;
}
.col-md-9, .col-md-3
{
padding: 0px;
}
.container
{
padding-right: 1px;
padding-left: 1px;
}
.center
{
width: 100px;
}
.font16
{
font-size: 16px;
color: Green;
}
.panel
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var CounterBtn;
$(document).ready(function () {
$("#btn-check-finance").click(function () {
$(".txtTotal").text("100");
$(".txtDiscount").text("20");
$(".txtNetPayable").text("80");
$('#financeModal').modal('show');
});
$('#btn-check-offers').click(function (e) {
$(".txtTotal").text("100");
$(".txtDiscount").text("20");
$(".txtNetPayable").text("80");
});
});
function chkbtn_Scheme_Change(param) {
if ($(param).is(":checked")) {
$(param).closest('tr').find(".planQuantity").val("1");
}
else {
$(param).closest('tr').find(".planQuantity").val("0");
}
}
$('.input-number').focusin(function () {
$(this).data('oldValue', $(this).val());
});
function OnChangeCountButton(param) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template Pro
Bootstrap Loan Calculator

Questions / Comments: