I have a form with dropdown select, each selection adds the value to calculate a total. I did so with the script below:
$(function(){
$("select.calculate").on("change", calc);
$("input[type=checkbox].calculate").on("click", calc);
function calc() {
var basePrice = 60;
newPrice = basePrice;
$("select.calculate option:selected, input[type=checkbox].calculate:checked").each(function () {
newPrice += parseInt($(this).data('price'), 10);
});
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" input name="test" class="calculate">
<option data-price="0" value=" ">0</option>
<option data-price="70" value="Test x 1">1</option>
<option data-price="140" value="Test x 2">2</option>
<option data-price="210" value="Test x 3">3</option>
</select>
<span id="item-price">0</span>
It works great on the page, but I want to carry the total number forward to the next page, like how I would carry the chosen choices. I am using the POST method, so far the next page is able to get the choices I made via POST.
But I can't seem to figure out how I would go about getting the total number to be carried forward to next page.
Any ideas?
</div>
you need to save the value in hidden field and then post to the next page just like below
<input type='hidden' name='item_price' value='' id='item_price_val'>
change your jquery function with
$(function(){
$("select.calculate").on("change", calc);
$("input[type=checkbox].calculate").on("click", calc);
function calc() {
var basePrice = 60;
newPrice = basePrice;
$("select.calculate option:selected, input[type=checkbox].calculate:checked").each(function () {
newPrice += parseInt($(this).data('price'), 10);
});
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
$("#item_price_val").val(newPrice);
}
});
and on PHP page get the value from the input variable like
$item_price = $_POST['item_price'];
I hope it will works for you.