使用 PHP LARAVEL 发布请求后返回页面上的位置答案

【问题标题】：Return back to location on page after Post request using PHP LARAVEL使用 PHP LARAVEL 发布请求后返回页面上的位置
【发布时间】：2021-10-19 10:01:37
【问题描述】：

我正在尝试使用 PHP laravel 及其所有功能构建一个单页网页。

我使用 javascript 在按下特定链接时滚动页面。

在页面底部，我有一个运行一些 php 代码的表单（发送电子邮件，...）在这个 POST 请求之后，我重定向回我的网页。

问题是，当我重定向回来时，我看到页面顶部和联系表单以及错误或成功代码位于页面底部靠近表单的位置。

这就是为什么我正在寻找一种在发布请求后自动滚动/移动到联系表单的方法，就像我按下链接按钮时所做的那样。

HTML：

        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
        @endif
        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif
        <form method="post" action="sendemail">
            {{ csrf_field() }}
            <div class="form-group">
                <label for="exampleFormControlInput1">Name</label>
                <input type="text" class="form-control" name="name" id="exampleFormControlInput1">
            </div>
            <div class="form-group">
                <label for="exampleFormControlInput1">Email</label>
                <input type="email" class="form-control" name="email" id="exampleFormControlInput1">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Message</label>
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="8"></textarea>
            </div>
            <div class="form-group">
                <input type="submit" name="send" class="btn btn-secondary" value="Send" />
            </div>
        </form>
    </div>

PHP 路线：

Route::post('/sendemail', 'App\Http\Controllers\SendEmailController@send');

PHP 控制器：

function send(Request $request)
{
    $this->validate($request, [
    'name'     =>  'required',
    'email'  =>  'required|email',
    'message' =>  'required'
    ]);

        $data = array(
            'name'      =>  $request->name,
            'email'     =>  $request->email,
            'message'   =>  $request->message
        );
    Mail::to($request->email)->send(new SendMailValidation($data));
    return back()->with('success', 'Thank you!');
}

Javascript（atm 仅用于在按下链接项时进行客户端浏览）：

let  contactLinkItem = document.querySelector("#contactLinkItem");

contactLink.addEventListener("click", navigateContact, false);

function navigateContact() {
  contactLinkItem.scrollIntoView({ behavior: "smooth" });
}

【问题讨论】：

标签： javascript php laravel post

【解决方案1】：

您可以检查错误包是否有任何消息，然后调用您在上面已经创建的 javascript 函数来触发滚动行为

@if($errors->any())
  <script>
    navigateContact()
  </script>
@endif


// Your old code
let  contactLinkItem = document.querySelector("#contactLinkItem");

contactLink.addEventListener("click", navigateContact, false);

function navigateContact() {
  contactLinkItem.scrollIntoView({ behavior: "smooth" });
}

推荐：

使用带有 API 的 Ajax 调用来提交您的表单（或 Livewire），您可以在不滚动甚至离开页面的情况下显示验证错误。这对您的用户体验来说是最好的。

【讨论】：