How can I add the thousands commas to these values?

Question

when I click total, it sums the votes column values, but it takes the thousand's commas as decimals commas. So, instead of receive 20,000 + 30,000 = 50,000, I receive 20,000 + 30,000 = 50. What to do to fix this? is something wrong with the ajax call function?

this is the html file:

 <!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#red').on('click', function() {
var colorId = $(this).attr("id");

$.ajax({"url": "tables.php", "data": {"color" : colorId},
success: function(response) {
$("#redr").html(response);
console.log(response);
}
});
});

$('#orange').on('click', function() {
var colorId = $(this).attr("id");

$.ajax({"url": "tables.php", "data": {"color" : colorId},
success: function(response) {
$("#oranger").html(response);
console.log(response);
}
});
});

$('#green').on('click', function() {
var colorId = $(this).attr("id");

$.ajax({"url": "tables.php", "data": {"color" : colorId},
success: function(response) {
$("#greenr").html(response);
console.log(response);
}
});
});

$('#indigo').on('click', function() {
var colorId = $(this).attr("id");

$.ajax({"url": "tables.php", "data": {"color" : colorId},
success: function(response) {
$("#indigor").html(response);
console.log(response);
}
});
});


$('#yellow').on('click', function() {
var colorId = $(this).attr("id");

$.ajax({"url": "tables.php", "data": {"color" : colorId},
success: function(response) {
$("#yellowr").html(response);
console.log(response);
}
});
});

$('#blue').on('click', function() {
var colorId = $(this).attr("id");

$.ajax({"url": "tables.php", "data": {"color" : colorId},
success: function(response) {
$("#bluer").html(response);
console.log(response);
}
});
});

$('#total').on('click', function() {
var sumofval = 0;
$(".val").each(function () {
if ($(this).html() !== '')
sumofval = sumofval + parseInt($(this).html());
$('#totalr').html(sumofval);
console.log(sumofval);
});
});


});
</script>

<title>Finals</title>

<style>
table, th {
border: 1px solid white;
padding: 30px;
}

th {
text-align: left;
color: white;
background-color: #007acc;
}

tr {
background-color: #b3ffb3;
}

#tcol {
border-collapse: collapse;
}

td {
border: 1px solid white;
text-align: left;
padding: 10px;
}

</style>
</head>

<body>

<h1 style="font-size:30px;">FINALS</h1>
<table id="tcol" style="width:60%;">
<thead>
<tr>
<th>Color</th>
<th>Votes</th>
</tr>
</thead>
<tr>
<td id="red"><a href="#">Red</a></td>
<td id="redr" class="val"></td>
</tr>
<tr>
<td id="orange"><a href="#">Orange</a></td>
<td id="oranger" class="val"></td>
</tr>
<tr>
<td id="yellow"><a href="#">Yellow</a></td>
<td id="yellowr" class="val"></td>
</tr>
<tr>
<td id="green"><a href="#">Green</a></td>
<td id="greenr" class="val"></td>
</tr>
<tr>
<td id="blue"><a href="#">Blue</a></td>
<td id="bluer" class="val"></td>
</tr>
<tr>
<td id="indigo"><a href="#">Indigo</a></td>
<td id="indigor" class="val"></td>
</tr>
<tr>
<td id="total" style="font-weight: bold;"><a 
href="#">TOTAL</a></td>
<td id="totalr" style="font-weight: bold;"></td>
</tr>
</table>


</body>
</html>

and this is the php file:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db_name = "finals";

$conn = new mysqli($servername, $username, $password, $db_name);
if ($conn->connect_error) {
echo "Connection failed: " . $conn->connect_error;
exit ();
}

$co = $_REQUEST['color'];

$sql = "SELECT SUM(votes) AS sum FROM Votes WHERE color = '$co'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
echo number_format($row["sum"]);
}
else {
echo 0;
}

$conn->close();

?>

"And the color that should output 0, output "NaN" and the browser console", which is logical, since you're trying to turn "No result found" into a number. — El_Vanja, Mar 13 '20 at 01:37
El_Vanja. Wow, you are right, so simple. Ok, that fixed one problem. So, I get the values with the commas and 0 when the color don't exist. But when I click TOTAL and it sum, let's say: 2,000 + 3,000, I get 5 as result. I want to obtain 5,000 — Joe Smith, Mar 13 '20 at 01:49
The second part is [here](https://stackoverflow.com/questions/11665884/how-can-i-parse-a-string-with-a-comma-thousand-separator-to-a-number). Whenever something fails to work as expected, *dump* the values (in this case, `console.log` them). All of them. That would've revealed that `parseInt` was the culprit. — El_Vanja, Mar 13 '20 at 02:05

score 0 · Answer 1 · answered Mar 13 '20 at 02:32

0

You are not defining the complete parameters use number_format($row["sum"],2,'.','');

answered Mar 13 '20 at 02:32

Muhammad Ibrahim

507
9
19

How can I add the thousands commas to these values?

1 Answers1