如果用户从浏览器返回时具有值，如何启用默认禁用的输入

Posted 2023-03-14

【中文标题】如果用户从浏览器返回时具有值，如何启用默认禁用的输入

【英文标题】：How to enable input disabled by default if it has value when user goes back from browser

【发布时间】：2019-01-25 12:48:29

【问题描述】：

我正在开发一个用于购买活动门票的 laravel 应用。 我默认禁用了 2 个输入框，默认情况下也禁用了 2 个复选框。您首先需要选中至少一个允许输入框输入的复选框，然后您可以通过按下按钮并发出发布请求来继续下一步。问题是：

如果有人决定从浏览器按下后退按钮（在提交 post 请求后），复选框仍处于选中状态，但输入框仍处于禁用状态，这意味着它的值将为 null（它存储之前的输入）。

这是页面刷新时的表单

这是提交前的表格

这是提交后没有刷新就返回的表单

如果用户在最终屏幕截图中提交表单，他将收到错误消息，因为在禁用的框中输入但已选中该框。当我尝试读取输入因为它被检查时，我会得到空值。

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="checkbox" name="2_box" id="2_box">
        </div>
        <div class="input-group-text">
            Jeton 2 &euro;
        </div>
        --<div class="input-group-text">--
            --Total: <span id="total_2" class="sum"></span>--
        --</div>--
    </div>
    <input type="text" class="form-control" placeholder="Cantitate" name="2_amount" id="2_amount" disabled>
    <div class="input-group-append">
        <div class="input-group-text">
            Total:  <span id="total_2" class="sum"></span>
        </div>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" name="10_box" id="10_box">
            </div>
            <div class="input-group-text">
                Jeton 10&euro;
            </div>
        </div>
        <input type="text" class="form-control" placeholder="Cantitate" name="10_amount" id="10_amount" disabled>
        <div class="input-group-append">
            <div class="input-group-text">
                Total:  <span id="total_10" class="sum"></span>
            </div>
        </div>
     </div>
  </div>
<script>
document.getElementById('2_box').onchange = function() 
    document.getElementById('2_amount').disabled = !this.checked;
;
document.getElementById('10_box').onchange = function() 
    document.getElementById('10_amount').disabled = !this.checked;
;
jQuery(document).ready(function()
    jQuery('#2_amount').change(function()
        var total = 0;
        jQuery('#2_amount').each(function()
            if(jQuery(this).val() != '')
                total = parseInt(jQuery(this).val()) * 2;
            
        );
        jQuery('#total_2').html(total);
    );
);
jQuery(document).ready(function()
    jQuery('#10_amount').change(function()
        var total = 0;
        jQuery('#10_amount').each(function()
            if(jQuery(this).val() != '')
                total = parseInt(jQuery(this).val()) * 10;
            
        );
        jQuery('#total_10').html(total);
    );
);

【参考方案1】：

你可以使用 Laravel Old Input。它是专门为保存请求之间的信息而创建的。因此，例如，如果表单失败。

不过，考虑到您的情况，您基本上只需要阅读 old 以获取应该触发复选框并启用/禁用它的输入。