javascript - 当您返回浏览器时如何避免重新计算值(value)？

Question

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

问题是，使用当前代码，如果您在确认页面上并决定返回上一页进行更改(也许您决定不需要往返而只需要单向) ，数量保持新值，现在选择往返时再次乘以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);
    } 
});

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