Laravel中如何根据下拉框选中值跳转对应页面，解决表单提交刷新问题

• 无限递归提交：你在submitForm函数中手动调用$('form#demoForm').submit()会再次触发表单的onsubmit事件，重新执行submitForm函数，形成死循环导致页面持续刷新。
• 缺失CSRF令牌：Laravel的POST请求默认要求校验CSRF令牌，你表单里没有添加@csrf令牌，校验不通过会触发重定向，也会导致页面异常刷新。
• Blade语法解析问题：{{ route() }}是Blade模板语法，如果你把这段JS写在独立的.js文件中，路由地址无法被正确解析，会导致表单提交的目标地址错误。

1. 修改表单代码 #

<form method="post" id="demoForm" onsubmit="return submitForm()">
    <div class="row">        
        <div class="form-group">
            <select class="form-control" name="paymode" id="paymode">
                <option disabled selected>支付方式</option>
                <option value="Pay Online">在线支付</option>
                <option value="Pay On Delivery">货到付款</option>
            </select>
        </div>
    </div>
    <!-- 新增CSRF令牌 -->
    @csrf
    <input type="submit" value="下一步">
</form>

2. 修改JS代码 #

<script type="text/javascript">
    function submitForm() {
        var selectedOption = $('#paymode').val();
        var url = "";
        if(selectedOption == 'Pay Online') {
            url = '{{ route('online-payment')}}';
        } else if (selectedOption == 'Pay On Delivery') {
            url = '{{ route('delivery-payment')}}';
        }
        // 未选择支付方式时阻止提交
        if(!url) {
            alert('请选择支付方式');
            return false;
        }
        // 仅设置表单action，无需手动调用submit
        $('#demoForm').attr('action', url);
        // 返回true让浏览器执行默认提交逻辑，不会触发递归
        return true;
    }
</script>

注意：这段JS代码必须放在.blade.php模板文件中，不能放在外部独立JS文件，否则{{ route() }}语法无法被解析为实际的路由地址。

3. 控制器返回逻辑调整 #

你的需求是选择对应支付方式后跳转到指定页面，需要在对应的控制器方法中添加跳转逻辑：

// 在线支付控制器方法示例
public function online_payment(Request $request)
{
    // 你的业务逻辑处理
    // 处理完成后跳转到目标页面
    return redirect('/pay_online');
}

// 货到付款控制器方法示例
public function delivery_payment(Request $request)
{
    // 你的业务逻辑处理
    // 处理完成后跳转到目标页面
    return redirect('/pay_on_delivery');
}

内容的提问来源于stack exchange，提问作者Otis