javascript - Perform an arithmetic calculation in jquery -
i have looped through database table , displayed records in page. in every single record displayed there 3 essential elements - span class called "cost-per", 2nd span class called "quantity" , 3rd 1 called "total-cost". there 2 submit buttons use ajax increase , decrease quantity in database. here's problem. when press increase/decrease button, works , value in span class of "quantity" updated new database value. when ajax gives me new "quantity" result database, not want display it. want multiply value in "cost-per" span element , display result in "total-cost" span element. can me this? possible perform arithmetic calculations in jquery? thank in advance , sorry being wordy.
here php display records:
if(mysqli_num_rows($run) >= 1){ while($row = mysqli_fetch_assoc($run)) { $name = $row['name']; $quantity = $row['quantity']; $price = $row['price']; $image = $row['image']; $category = $row['category']; $total = $price * $quantity; echo "<div class=\"post-container\">\n"; echo "<div class=\"post-thumb\">\n"; echo "<img src='$image'>\n"; echo "</div>\n"; echo "<div class=\"post-title\">\n"; echo "<h4 style=\"font-weight:bold;\">\n"; echo "<a href=\"view.php?name=$name&category=$category\" class=\"links\" target=\"_blank\">$name</a>\n"; echo "<button type=\"submit\" id=\"deletion\" class=\"btn btn-default deletion\">delete</button>\n"; echo "</h4>\n"; echo "</div>\n"; echo "<div class=\"post-content\">\n"; echo "<ul style=\"list-style-type:none;\">\n"; echo "<li>cost per item: <span id=\"cost\" class=\"cost-per\">$price</span>/=</li>\n"; echo "<li>\n"; echo "quantity: \n"; echo "<button type=\"submit\" class=\"glyphicon glyphicon-minus decrease\" title=\"decrease quantity\"></button>\n"; echo "\n"; echo "<span id=\"cost\" class=\"quantity\">$quantity</span>\n"; echo "\n"; echo "<button type=\"submit\" class=\"glyphicon glyphicon-plus increase\" title=\"increase quantity\"></button>\n"; echo "</li>\n"; echo "<li>total cost: <span id=\"cost\" class=\"total-cost\">$total</span>/=</li>\n"; echo "</ul>\n"; echo "</div>\n"; echo "</div>"; } }
here jquery of 1 of buttons
$(".decrease").click(function(){ var __temp = $(this); var itemname = __temp.parent("li").parent("ul").parent("div.post-content").siblings("div.post-title").find("a").text(); var cost = +(__temp.parent("li").parent("ul").find(".cost-per").text()); var total = __temp.parent("li").parent("ul").find(".total-cost").text(); $.post( "decrease-cart.php?username=<?php echo $username?>", {name: itemname}, function(result){ __temp.siblings(".quantity").text(result); total = result * cost; } ); });
you need parse values floats if in decimal:
$(".decrease").click(function(){ var __temp = $(this); var itemname = __temp.parent("li").parent("ul").parent("div.post-content").siblings("div.post-title").find("a").text(); var cost = +(__temp.parent("li").parent("ul").find(".cost-per").text()); var total = __temp.parent("li").parent("ul").find(".total-cost").text(); $.post( "decrease-cart.php?username=<?php echo $username?>", {name: itemname}, function(result){ __temp.siblings(".quantity").text(result); total = parsefloat(result) * parsefloat(cost); // edited line ========= } ); });
Comments
Post a Comment