Link to home
Start Free TrialLog in
Avatar of Yaku Kakashi
Yaku Kakashi

asked on

PHP JQuery Vat calculator with less

Hello guys I Have a VAT calculator
price devided by 1.12 and less with 0.01..how cal I make the user input to automatically add thousand separator... instead of 10000000 it with display 100,000,000 also with the result. Here is my code


<head>
<link rel="stylesheet" type="text/css" href="plugins/style.css">
<style>
input[type=text], select {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 46px;
    font-style: bold;
    text-align: center;
}
</style>
</head>
<br>
<center>
<div class="header">
            <h2><b>WITHHOLDING CALCULATOR</b></h2>
</div>
<form>
<br/>
<input type="text" class="price" name="price" id="price"/>
<br/>
<h2><b>Quarter</b></h2>
<h2 name="vat" id="vat">0.00</h2>
<h2><b>Less</b></h2>
<h2 name="less" id="less">0.00</h2>
<h2><b>Payable</b></h2>
<h2 name="payable" id="payable">0.00</h2>
</center>
</form>
<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var vat = $('#price').val() / 1.12;
        $('#vat').html((vat).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var less = $('#price').val() / 1.12 * 0.01;
        $('#less').html((less).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var payable = $('#price').val() - ($('#price').val() / 1.12 * 0.01);
       $('#payable').html((payable).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(function() {
$('.price2').mask('.000.000.000.000,0',{reverse : true});
});
</script>
Avatar of Swatantra Bhargava
Swatantra Bhargava
Flag of India image
Use parseFloat in your calculation and check the result.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Do you mean if they type in 100 this is actually 1.00 ?
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

yes 1.00
and if they type 10000000000
the result will be 100,000,000.00
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

I already solve the output but something going wrong if the user input reached 1,000,000.00 it shows Nan.. i'll post my Screenshot for reference.

<center>
<div class="header">
            <h2><b>WITHHOLDING CALCULATOR</b></h2>
</div>
<form>
<br/>
<input type="text" class="price" name="price" id="price" placeholder="Actual Amount"/>
<br/>
<h2><b>Quarter ( VAT 1.12% )</b></h2>
<h2 name="vat" id="vat">0.00</h2>
<h2><b>Less ( Less 0.01% )</b></h2>
<h2 name="less" id="less">0.00</h2>
<h2><b>Payable ( Actual Price minus Less )</b></h2>
<h2 name="payable" id="payable">0.00</h2>
</center>
</form>
<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var vat = $('#price').val().replace(',','') / 1.12;
        $('#vat').html((vat).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var less = $('#price').val().replace(',','') / 1.12 * 0.01;
        $('#less').html((less).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var payable = $('#price').val().replace(',','') - ($('#price').val().replace(',','') / 1.12 * 0.01);
       $('#payable').html((payable).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
    });
});
</script>

<script>
$('#price2').mask("000,000,000,000.00", {reverse: true});
</script>
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

here is my code

<form>
<br/>
<input type="text" class="price" name="price" id="price" placeholder="Actual Amount"/>
<br/>
<h2><b>Quarter ( VAT 1.12% )</b></h2>
<h2 name="vat" id="vat">0.00</h2>
<h2><b>Less ( Less 0.01% )</b></h2>
<h2 name="less" id="less">0.00</h2>
<h2><b>Payable ( Actual Price minus Less )</b></h2>
<h2 name="payable" id="payable">0.00</h2>
</center>
</form>
<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var vat = $('#price').val().replace(',','') / 1.12;
        $('#vat').html((vat).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var less = $('#price').val().replace(',','') / 1.12 * 0.01;
        $('#less').html((less).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var payable = $('#price').val().replace(',','') - ($('#price').val().replace(',','') / 1.12 * 0.01);
       $('#payable').html((payable).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
    });
});
</script>

<script>
$('#price').mask("000,000,000,000.00", {reverse: true});
</script>
Avatar of Swatantra Bhargava
Swatantra Bhargava
Flag of India image
I just added
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
and run your codem its working fine.
First.png
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Firstly, you don't need to define 3 event handlers - you can do it in one like this
<script  type="text/javascript">
$(function() {
  $('#price').keyup(function(ev){
    var tot1 = $('#price').val();
    
    var payable = $('#price').val().replace(',','') - ($('#price').val().replace(',','') / 1.12 * 0.01);
    $('#payable').html((payable).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
     
    var vat = $('#price').val().replace(',','') / 1.12;
    $('#vat').html((vat).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
    
    var less = $('#price').val().replace(',','') / 1.12 * 0.01;
    $('#less').html((less).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
  });
});
</script>

Open in new window

Secondly, the code you posted above - when I run here does not result in NaN - I suspect the problem is the mask that is doing this - whatever masking library you are using is falling over on large numbers. I can't say for sure as you have not posted what library you are using.
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

I used jquery.min.js... Yes no problem with the result sence I already solve that on my posted code. what I'm trying to solve is when I used masking on user input I got NAN results if the value reached million...
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
I'm trying to solve is when I used masking on user input I got NAN results if the value reached million...
As I said that appears to be an issue with the masking library you are using - which is not in jquery.min.js - you need to tell us what jQuery library you are using for masking.
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

sory my bad... I Used jquery.mask.js
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

I tried to remove the masking method on user input. but still having NAN result if i manually input 100,000,000 it seems error occurred when it has 2 commas
but if I inout 1000000000 it works perfectly.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
100,000,000 => is not a number so it will generate an error. You have to clean the value before working with it

Try this 
var tot1 = $('#price').val();
tot1 = tot1.replace(/[^\d]/g,'');
// Then do your calculations here

Open in new window

Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

I already cleared the value by using this lines
var vat = $('#price').val().replace(',','') / 1.12;
same as var price and var less
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

but it does not work either
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

I tried your code but it doest not accept decimal points.. if i input 1,000.50 it read as 100050 it ignores decimal point...
Avatar of Swatantra Bhargava
Swatantra Bhargava
Flag of India image
Remove \. from @Julian Hansen code and check please
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

I removed \. but still doesn't accept decimals
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

You got it right Julian..thank you...
Avatar of Yaku Kakashi
Yaku Kakashi

ASKER

$(function() {
  $('#price').keyup(function(ev){
    var tot1 = $('#price').val().replace(/\,/g,'');
    var payable = tot1 - (tot1 / 1.12 * 0.01);
    $('#payable').html((payable).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
     
    var vat = tot1 / 1.12;
    $('#vat').html((vat).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
   
    var less = tot1 / 1.12 * 0.01;
    $('#less').html((less).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
  });
});
</script>

<script>
$('#price').mask("#,##0.00", {reverse: true});
</script>
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
You are welcome.