jquery - 表单提交后出现错误，如何显示选择值？

Question

当用户提交表单时，如果存在任何错误，则应使用提交的值填充字段，以便用户不需要再次插入这些值。这工作正常，但对于选择字段不起作用。

我有以下代码:

<form method="post" class="clearfix" action="{{route('post.store')}}" enctype="multipart/form-data">

<div class="form-row">
    <div class="form-group">
        <label for="event_categories">Categories</span></label>
        <select required  multiple class="form-control"  name="categories[]" id="categories">

            @foreach($categories as $category)
                <option value="{{$category->id}}">{{$category->name}}</option>
            @endforeach

        </select>
    </div>
</div>
<form>

您知道为什么表单提交后出现错误，选择的类别不会出现吗？

Answer 1

您必须指定在加载页面时首先应选择 <option>，方法是为其提供适当的属性:

<option selected>...</option>

在您提供的代码中，selected 属性永远不会应用于任何 <option> ，因此当您加载页面时，浏览器永远不会将它们设置为 selected 。

当你被重定向回表单时，浏览器不知道之前的请求(提交表单时发出的 POST 请求)提交了哪些数据，因此它无法自动将任何选项设置为 selected ，除非在应用程序返回的 HTML 响应中明确告知。

当验证失败时，Laravel 会自动将提交的表单数据刷新到 session 中，因此您可以在以下请求中检索它并使用此信息来渲染表单，向浏览器指示 <option> 中的哪一个之前是 selected (如果有的话)。

您可以使用 Laravel 的 old() 帮助程序访问通过先前请求提交的数据。

要获取为字段提交的值，请将字段的 name 传递给帮助程序:

<input name="something" value="{{ old('something', 'optional fallback value') }}">

由于 PHP 将字段的值解释为数组，因此 old('categories') 将返回值数组或 null 。

现在，对于每个选项，检查循环中当前选项的值是否出现在旧值数组中，如果出现则应用 selected 属性:

@foreach ($categories as $category)
    <option {{ in_array($category->id, old('categories', [])) ? 'selected' : '' }} value="{{ $category->id }}">
        {{ $category->name }}
    </option>
@endforeach

在对 old() 帮助程序的调用中包含第二个参数非常重要，该帮助程序将空数组 ( [] ) 设置为后备值。这可以防止它在上一个请求的数据中找不到指定的键时返回 null，这会导致 in_array() 抛出错误。

<小时/>

此外，标签中存在错误的结束 </span> 标记:

<label for="event_categories">Categories</span></label>
                                        ^^^^^^^