返回浏览器时如何防止重新计算价值？

Question

我有一个用于预订的多页表格，它根据几个因素计算所需的交通服务数量。您首先选择乘客数量（'#input_2_6'），根据您选择的车辆类型，您需要多少车辆，因此当您选择车辆时，“数量”字段（“#input_2_20”）会更新。在下一页/步骤中，您必须选择是单程还是往返，因此当您选择往返时，数量字段将乘以 2。然后在下一页/步骤中，您只会看到您的订单摘要（确认页面）。

问题是，使用当前代码，如果您在确认页面上并决定返回上一页进行更改（也许您决定不想要往返，只需要单程） ，数量编号保持新值，现在选择往返时再次乘以2。

    jQuery(document).ready(function ($) {
var totalBook;
    $('#input_2_12').change(function () {
        switch ($(this).val()) {
            case 'Escalade|49':
                $('#input_2_20').val(1);
                    totalBook = Math.ceil($('#input_2_6').val() / 5);
                $("#input_2_20").val(totalBook);
                break;
            case 'Suburban|0':
                $('#input_2_20').val(1);
                    totalBook = Math.ceil($('#input_2_6').val() / 6);
                $("#input_2_20").val(totalBook);
                break;
            case 'Van|14':
                $('#input_2_20').val(1);
                    totalBook = Math.ceil($('#input_2_6').val() / 10);
                $("#input_2_20").val(totalBook);
                break;
        }
    });
    totalBookNew = $("#input_2_20").val();
    $('input:radio[name="input_7"]').change(function () {
$('#input_2_20').val(totalBookNew);
        if ($(this).val() == 'Round trip'){
            $('#input_2_20').val(totalBookNew);
            newTotal = totalBookNew * 2;
            $('#input_2_20').val(newTotal);
        }
        else if ($(this).val() == 'One way'){
            $('#input_2_20').val(totalBookNew);
        } 
    });
});

我尝试在第二个函数上使用第一个函数中的 'totalBook' 的值，但它返回未定义，这就是我创建 totalBookNew 的原因...

非常感谢任何帮助！

Answer 1

看起来主要问题是在您进行计算后将计算值设置到原始输入字段中。您最好的选择是将计算存储在隐藏的 html 输入中的其他位置。所以你会有一个类似这样的输入：

<input type="hidden" id="input_2_20_calculated" value=0>

然后，不要将计算值设置回输入，而是将其设置在隐藏输入中。隐藏的输入将与表单一起传递，因此您将能够使用计算值。这就是为什么你得到重复的原因是因为每次触发计算时，它都会使之前的计算值翻倍。

totalBookNew = $("#input_2_20").val();
$('input:radio[name="input_7"]').change(function () {
$('#input_2_20').val(totalBookNew); //This line can be deleted
    if ($(this).val() == 'Round trip'){
        $('#input_2_20').val(totalBookNew); //You can also delete this line
        newTotal = totalBookNew * 2;
        $('#input_2_20_calculated').val(newTotal);
    }
    else if ($(this).val() == 'One way'){
        $('#input_2_20_calculated').val(totalBookNew);
    } 
});

请注意，您应该在后端重新计算。不要在前端计算并相信后端的那些计算。在提交和发布假数字时很容易操纵表单数据。