<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>
</span>
<input name="quant[1]" onkeydown="inputnumeronkeydown(event)" class="form-control input-sm input-number planQuantity" value="0" min="0" max="100" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-default btn-number" onclick="OnChangeCountButton(this)" data-type="plus" data-field="quant[1]"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</td>
<td><label>Product 1</label></td>
</tr>
<tr>
<td><div class="checkbox"><label> <input class="chkbtn_Scheme" onchange="chkbtn_Scheme_Change(this)" product-code="210" name="chkbtn_Scheme" id="checkbox2" value="" type="checkbox"> <i class="fa fa-inr"></i> 1200</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[2]"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input name="quant[2]" onkeydown="inputnumeronkeydown(event)" class="form-control input-sm input-number planQuantity" value="0" min="0" max="100" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-default btn-number" onclick="OnChangeCountButton(this)" data-type="plus" data-field="quant[2]"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</td>
<td><label>Product 2</label>
</td>
</tr>
<tr>
<td><div class="checkbox"><label> <input class="chkbtn_Scheme" onchange="chkbtn_Scheme_Change(this)" product-code="207" name="chkbtn_Scheme" id="checkbox3" value="" type="checkbox"><i class="fa fa-inr"></i> 3000</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[3]"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input name="quant[3]" onkeydown="inputnumeronkeydown(event)" class="form-control input-sm input-number planQuantity" value="0" min="0" max="100" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-default btn-number" onclick="OnChangeCountButton(this)" data-type="plus" data-field="quant[3]"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</td>
<td><label>Product 3</label></td>
</tr>
<tr>
<td> <div class="checkbox"><label> <input class="chkbtn_Scheme" onchange="chkbtn_Scheme_Change(this)" product-code="206" name="chkbtn_Scheme" id="checkbox4" value="" type="checkbox"><i class="fa fa-inr"></i> 5000</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[4]"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input name="quant[4]" onkeydown="inputnumeronkeydown(event)" class="form-control input-sm input-number planQuantity" value="0" min="0" max="100" type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-default btn-number" onclick="OnChangeCountButton(this)" data-type="plus" data-field="quant[4]"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</td>
<td><label>Product 4</label></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-sm btn-success ladda-button" data-style="expand-left" type="button"
id="btn-check-offers">
<i class="fa fa-calculator"></i>Show My Offer</button>
<button class="btn btn-sm btn-success ladda-button" data-style="expand-left" type="button"
id="btn-check-finance" data-toggle="modal">
<i class="fa fa-calculator"></i>Check for Finance Options</button>
<div class="col-md-12" style="text-align: center;">
<div class="alert alert-danger error-label" style="display: none; text-align: center;"
role="alert">
</div>
</div>
</div>
<div class="col-md-4">
<table class="table" style="margin-left: -25px;">
<thead>
<tr>
<th>
<label class=" font16">
Results</label>
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class=" font16">
Total</label>
</td>
<td>
<i class="fa fa-inr font18"></i>
</td>
<td>
<label id="Label3" class="txtTotal font18 alignright">
0
</label>
</td>
</tr>
<tr>
<td>
<label class="font16">
Discount</label>
</td>
<td>
<i class="fa fa-inr font18"></i>
</td>
<td>
<label id="Label4" class="txtDiscount font18 alignright">
0
</label>
</td>
</tr>
<tr>
<td>
<label class="font16">
Payable</label>
</td>
<td>
<i class="fa fa-inr font18"></i>
</td>
<td>
<label id="Label5" class="txtNetPayable font18 alignright">
0
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="financeModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Finance Options</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<thead>
<tr class="success">
<th>
<label>
Duration
</label>
</th>
<th>
<label>
Processing Fee
</label>
</th>
<th>
<label>
Down Payment
</label>
</th>
<th>
<label>
EMI
</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
6 Months
</label>
</td>
<td>
<i class="fa fa-inr"></i>
<label class="lblProcesssFee_6">
0
</label>
</td>
<td>
<i class="fa fa-inr"></i>
<label class="lblDownpay_6">
0
</label>
</td>
<td>
<i class="fa fa-inr"></i>
<label class="lblEMI_6">
0
</label>
</td>
</tr>
<tr>
<td>
<label>
12 Months
</label>
</td>
<td>
<i class="fa fa-inr"></i>
<label class="lblProcesssFee_12">
0
</label>
</td>
<td>
<i class="fa fa-inr"></i>
<label class="lblDownpay_12 ">
0
</label>
</td>
<td>
<i class="fa fa-inr"></i>
<label class="lblEMI_12">
0
</label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
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
{
box-shadow: 10px 10px 5px #888888;
}
.panel-body
{
padding-left: 0;
padding-right: 0;
}
.error-label
{
margin-top: 15px;
}
.alignright
{
text-align: right;
float: right;
}
.font18
{
font-size: 24px;
color: Green;
font-weight: bolder;
}
@media screen and (max-width: 767px)
{
.offer-container
{
margin-top: 0px;
width: auto;
}
h2
{
font-size: 20px;
}
.panel
{
box-shadow: none;
}
.error-label
{
margin-left: -15px;
margin-top: 5px;
}
}
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) {
fieldName = $(param).attr('data-field');
type = $(param).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
// if (parseInt(input.val()) == input.attr('min')) {
// $(param).attr('disabled', true);
// }
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
// if (parseInt(input.val()) == input.attr('max')) {
// $(param).attr('disabled', true);
// }
}
} else {
input.val(0);
}
}
function OnChangeCount(param) {
minValue = parseInt($(param).attr('min'));
maxValue = parseInt($(param).attr('max'));
valueCurrent = parseInt($(param).val());
var name = $(param).attr('name');
if (valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
$(param).val($(param).data('oldValue'));
}
if (valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
$(param).val($(param).data('oldValue'));
}
}
function inputnumeronkeydown(e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
