I have a list of divs that pull integer values from a SQL table. All of those divs are not visible unless a certain selection is made in the form. I want to create another div that sum's all visible divs at the end for the user to see their ending total.
Edit: The below code is now what I have but it totals all divs not ones that are only visible.
$("#clicky").click(function () {
var total = 0;
$('.equipmentmprice').each(function() {
total += parseFloat($(this).find('span.price').eq(0).text());
});
$('#totalamount').text('Total is: $' + total);
});
I know I can use javascript or jquery but I'm not sure really where to start.
Here is an example of one of my divs:
<div class="largeplantablefive equipmentmprice" style="display:none">
<?php
$connection = mysql_connect('localhost', 'test', 'testone');
mysql_connect('localhost', 'test', 'testone');
mysql_select_db('test');
$queryone = mysql_query("SELECT price FROM pricing WHERE value = 'plantablefive'");
$query_row = mysql_fetch_array($queryone);
echo "Plan Tables: $" . ($query_row[price]) . "<span style='color:red'><i> Price does not include cost of the physical table.</i></span>";
?>
</div>
Right now I'm thinking I will have to create another div or other tag inside the echo statement where the value equals $query_row.
Found the answer with some searching and using multiple suggestions combining it into my own. Below is what I did and the answer. Just added the :visible into the class select.
$("#clicky").click(function () {
var total = 0;
$('.equipmentmprice:visible').each(function() {
total += parseFloat($(this).find('span.price').eq(0).text());
});
$('#totalamount').text('Total is: $' + total);
});
You can do this with jQuery...
var divCount = $("div :visible").length;
If you need to loop through them...
$("div :visible").each(function(index) {
console.log( index + ": " + $( this ).text() );
//etc.. etc..
});