java dropdown计算出的数字发布到下一页

时间:2017-12-26 11:31:14

标签: javascript php jquery html

我有一个带下拉选择的表单,每个选项都会添加值来计算总计。我是用下面的脚本完成的:

$(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>

它在页面上运行得很好,但我希望将总数提前到下一页,就像我将如何进行所选择的选择一样。我正在使用POST方法,到目前为止,下一页能够通过POST获得我做出的选择。

但我似乎无法弄清楚如何将总数转移到下一页。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您需要将值保存在隐藏字段中,然后发布到下一页,如下所示

<input type='hidden' name='item_price' value='' id='item_price_val'>

使用

更改您的jquery函数
$(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);

    }
});

并在PHP页面上获取输入变量的值,如

$item_price = $_POST['item_price'];

我希望它适合你。