"offer calculator "
Bootstrap 3.3.0 Snippet by Emiliano87

<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(); } }

Related: See More


Questions / Comments: