我是否将 Javascript 用于 HTML 需要影响两个变量？

Question

我目前正在制作贝宝结帐表格。该表单允许用户指定一些选项，当他们提交表单时，它会将订单提交给 PayPal 进行处理。

该表单有一个 下拉列表，允许用户选择他们希望订阅重复出现的次数。它的设置如下：

<select name="srt">                         <!-- User specifies amount of times payment should recur -->
    <option value="1"></option>
    <option value="2"></option>  
    <option value="3"></option>  
</select>
<input type="hidden" name="src" value="1">   <!-- Specifies that payment should be recurring-->

这在大多数情况下都有效，但是当用户使用 srt value="1" 选择第一个选项时，paypal 相反希望这是提交时 srt 为空或省略，src（表单下方的隐藏输入）为 value="0"。这样做的原因似乎是，如果付款重复 1 次，即仅向客户收取一次费用，那么这根本不是定期付款，因此 srt 无效，而是 < code>src（指定是否应重复付款）应设置为 0。

我想知道处理这个问题的最佳方法是什么。我唯一能想到的是使用 javascript 根据用户在 下拉列表中选择的内容来设置隐藏表单值。

这是处理这个问题的最佳方法，还是有更好的方法不需要浏览器处理 javascript？

谢谢！

Answer 1

首先，我想澄清的是，在浏览器中计算的所有值必须在服务器上进行验证。服务器端验证确实无可替代。客户端脚本只能用于改善用户体验。 如果不这样做，就会出现一个等待被利用的安全漏洞。

1. 要解决当前的问题，您可以利用发布表单时不会提交禁用的输入这一事实。因此，如果用户不选择定期付款，srt 将永远不会被发布。
2. 首先将 srt 禁用并隐藏。
3. 隐藏输入 src 的初始值应为 0。
4. 添加“定期付款？”复选框到表单。
5. 如果用户选择该复选框，则通过 Javascript 启用并显示 srt。
6. 将 src 的值设置为等于用户在 srt 中选择的值。
7. 如果用户取消选中该复选框，则禁用并清空 srt 和 src。

DEMO

标记：

<p><input type="checkbox" value="recurring" id="recurring"/>Recurring Payment?</p>
<select disabled id="srt" name="srt">                         
    <option selected value="2">2</option>  
    <option value="3">3</option>  
</select>
<input type="hidden" id="src" name="src" value="0"> 

jQuery：

$('#recurring').click(function() {
    var $srt = $('#srt'),
        $src = $('#src');
    if (this.checked) {
        $srt.prop('disabled', false).toggle();
        $src.val($srt.val());
    } else {
        $srt.prop('disabled', true).toggle();
        $src.val(0);
    }
});

$('#srt').change(function() {
    $('#src').val($(this).val());
});