表单提交 laravel 8 后返回同一选项卡答案

【问题标题】：Return to same tab after form submit laravel 8表单提交 laravel 8 后返回同一选项卡
【发布时间】：2022-08-03 11:10:28
【问题描述】：

我有一个包含多个选项卡的视图。每个都有不同的形式。当我从一个选项卡提交表单时，它返回到同一页面但主选项卡。我怎样才能返回到我正在工作的同一个选项卡。

控制器

  public function updateProfile(Request $request)
   {

        $user = User::where(\'id\', Auth::user()->id)->first();
        $user->update([
            \'full_name\' => $request->full_name,
            \'phone\'     => $request->phone,
        ]);
    }

    return redirect()->back();
 }

html表单

<form  action=\"{{route(\'management.update\')}}\" method=\"POST\" enctype=\"multipart/form- 
data\">

这就是我的标签的方式：

      <ul class=\"nav nav-tabs mb-5\" id=\"ex1\" role=\"tablist\">
          <li class=\"nav-item\" role=\"presentation\">
                <a class=\"nav-link active\" id=\"ex1-tab-2\" data-mdb-toggle=\"tab\" href=\"#ex1- 
                   tabs-2\" role=\"tab\"
                aria-controls=\"ex1-tabs-2\" aria-selected=\"false\"><i class=\'bx bxs-user- 
                 rectangle\'></i> User</a>
            </li>
            @endif
            <li class=\"nav-item\" role=\"presentation\">
                <a class=\"nav-link \" id=\"ex1-tab-1\" data-mdb-toggle=\"tab\" href=\"#ex1-tabs-1\" 
                  role=\"tab\"
                    aria-controls=\"ex1-tabs-1\" aria-selected=\"true\"><i class=\'bx bx- 
                 buildings\'></i> Profile</a>
            </li>
        </ul>

您是否考虑过使用 AJAX 来提交表单？

标签： javascript jquery laravel

【解决方案1】：

在控制器上发送重定向后应将哪个选项卡设置为活动的数据。您可以通过发送闪存会话来做到这一点。

Session::flash('active-tab', '#ex1-tab-1');

然后在视图结束时，检查会话是否存在并使用会话上的数据激活选项卡。

@if(Session::has('active-tab'))
@php
    $active_tab= Session::get('active-tab');
@endphp
$(document).ready(function(){
     $(".active").removeClass("active");
     $('{{$active_tab}}').addClass("active");
})

@endif

【讨论】：

【解决方案2】：

在您的 html 表单中添加隐藏的输入元素。

<input type="hidden" name="tab" value="<the tab id>">

在你的控制器中，用数据返回你的路由，并将请求选项卡放在上面。

$data =['tab' => $request->tab];

return redirect()->back()->with($data);

最后，在您的导航链接和选项卡窗格中，设置一个条件来检查选项卡值

<a class="nav-link @if (request('tab') == 'ex1-tab-2') active @endif" ..>

【讨论】：