I want to have an order page which allows the costumer to select an item and its quantity and then calculate the total amount ordered in a div.
Initially here's my code:
For the quantity jquery:
<script>
$(function() {
$(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
$(".button").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + "The Price";
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - "The Price";
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});
The HTML for the items:
<ul>
<li class="numbers-row">
<label>
<input class="calc" type="checkbox" name="combos[]" id="item2-title" value="The Name"/>
The Thumbnail<p>The Title</p>
<input type="hidden" name="item1-val" value="The Price">
</label>
</li>
<li class="numbers-row">
<label>
<input class="calc" type="checkbox" name="combos[]" id="item2-title" value="The Name"/>
The Thumbnail<p>The Title</p>
<input type="hidden" name="item2-val" value="The Price">
</label>
</li>
<li class="numbers-row">
<label>
<input class="calc" type="checkbox" name="combos[]" id="item2-title" value="The Name"/>
The Thumbnail<p>The Title</p>
<input type="hidden" name="item2-val" value="The Price">
</label>
</li>
</ul>
My jquery for the total:
<script type="text/javascript">
function calcscore(){
var score = 0;
var checked=$(".calc:checked ~ input[type=hidden]").each(function(){
score+=parseInt($(this).val());
});
$('#price').text(score.toFixed(2));
}
$(document).ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
And my HTML where the total price of the items will be shown:
<p>Total: PHP <span id="price">0</span></p>
I cant seem to integrate all of them, any help?
There are actually a lot more items, but for the sake of simplifying we'll stick with 3.
PS I only basic jquery and PHP but I can copy paste to the least. Any input is greatly appreciated. Thanks guys
Aucun commentaire:
Enregistrer un commentaire