I have a problem to do calculations with numbers in jquery. When the number is in the PHP number-format, jquery doesn't detect those numbers. Please find the code and the screen-shot of the output. Any help would be appreciated.
<tr class="noBorder">
<td><span class="circle">1A</span></td>
<td><input type="text" class="amnt" value="<?php echo number_format($a1,2);?>"/></td>
</tr>
<tr class="noBorder">
<td><span class="circle">4</span></td>
<td><input type="text" class="amnt" id="4tax" /></td>
</tr>
<tr class="noBorder">
<td><span class="circle">5A</span></td>
<td><input type="text" class="amnt" id="5a" /></td>
</tr>
<tr class="noBorder">
<td><span class="circle">7</span></td>
<td><input type="text" name="7" class="amnt"/></td>
</tr>
<tr class="noBorder">
<td><span class="circle">7A</span></td>
<td><input type="text" name="7a" class="amnt" /></td>
</tr>
<tr class="noBorder">
<td>1A+4+5A+7+7A</td>
<td><span class="circle">8A</span></td>
<td>
<input type="text" id="8a" />
</td>
</tr>
Jquery
$(".amnt").on("keydown keyup", function() {
calculateSum();
});
function calculateSum() {
var sum2 = 0;
$(".amnt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum2 += parseFloat(this.value);
//$(this).css("background-color", "#FEFFB0");
}
});
}
Please check this one:-
$(".amnt").on("keydown keyup", function() {
calculateSum();
});
function calculateSum() {
var sum2 = 0;
$(".amnt").each(function() {
//add only if the value is number
if (this.value.indexOf(',') > -1) {
sum2 += parseFloat(this.value.split(",").join(""));
}else if(!isNaN(this.value) && this.value.length != 0) {
sum2 += parseFloat(this.value);
$("#sum").text(sum2).css("background-color", "#FEFFB0");
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" class= "amnt" value = "8,133,231.17"><br/>
<input type = "text" class= "amnt" value = ""><br/>
<input type = "text" class= "amnt" value = ""><br/>
<div id = "sum"></div>
</div>
Javascript
can't handle numbers with ,
in it as thousands separator. It is not a number, it is a human-formatted string. Do as follows
<?php echo number_format($a1, 2, '.', '');?>
UPD. In js you can remove ,
with this.value.replace(/,/g, "")
to remove commas:
parseFloat("12,233.12")
>12
parseFloat("12,233.12".replace(/,/g,""))
>12233.12
$(".amnt").on("keydown keyup", function() {
calculateSum();
});
function calculateSum() {
var sum2 = 0;
$(".amnt").each(function() {
var thevalue = this.value.replace(/,/g,'');
if (!isNaN(thevalue ) && thevalue .length != 0) {
sum2 += parseFloat(thevalue);
$("#sum").text(sum2).css("background-color", "#FEFFB0");
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" class= "amnt" value = "8,133,231.17"><br/>
<input type = "text" class= "amnt" value = ""><br/>
<input type = "text" class= "amnt" value = ""><br/>
<div id = "sum"></div>
</div>
I will advice you to display the numbers with Javascript instead of PHP. First set the value="" in your html
$(document).ready(function() {
//use json_encode to make the php script readable by javascript
var amntval = Number(<?php echo json_encode($a1,2);?>);
//display the value in the amnt field
$(".amnt").val(amntval.toLocaleString('en'));
//now run your calculations
$(".amnt").on("keydown keyup", function() {
calculateSum();
});
function calculateSum() {
var sum2 = 0;
$(".amnt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum2 += parseFloat(this.value);
//$(this).css("background-color", "#FEFFB0");
}
});
}
});
This worked for me and I have not tested it with your codes but I believe it should work!