根据单选按钮选择显示不同的表单不能正常工作

Question

我有一个页面来编辑帖子的管理员。

在这个页面中有一些单选按钮。每个单选按钮对应一个帖子的管理员。选择单选按钮后，将在表单字段中填充该管理员的详细信息。

当用户访问帖子页面的这个编辑管理员时，默认情况下不应该选中单选按钮，所以我在单选按钮中没有“checked”属性。

在这个页面中，我想要有两个表单，一个用于更新的表单和一个用于存储管理员的表单。

因此，例如当用户访问该页面时，例如有3个单选按钮：John，Jake，Create new admin。如果选择了与用户John对应的单选按钮，则应显示更新表单，其中表单字段填充了John管理员详细信息，对于Jake amdin也是如此。如果选中“创建新管理员”单选按钮，则应显示存储表单，并重置表单字段。

问题是当用户访问帖子页面的编辑管理员时没有出现单选按钮，因此无法选择任何单选按钮，因此不会出现任何表单。你知道如何正确组织这两个表格，以便在选择对应的单选按钮时出现每个表格吗？

//更新表格

<form id="update_admins" method="post" class="clearfix"
              action="{{route('admins.update', ['post_id' => $post->id])}}" >
            {{csrf_field()}}
            <div class="form-row">
                <div class="form-group col col-lg-6">
                    <label for="admins">Post admins</label>

                    @foreach($administrators as $admin)
                        <div class="form-check">
                            <input autocomplete="off" class="form-check-input radio" type="radio" name="radiobutton" value="{{ $admin->id }}" id="{{$admin->id}}">
                            <label class="form-check-label" for="exampleRadios1">
                                {{$admin->name}}
                            </label>
                        </div>
                    @endforeach

                    <div class="form-check">
                        <input autocomplete="off" class="form-check-input" type="radio" name="radiobutton" id="update_admin"
                               value="update_admin">
                        <label class="form-check-label" for="exampleRadios2">
                            Create new admin
                        </label>
                    </div>

                </div>
            </div>
            <div class="form-group">
                <label for="name">Name</label>
                <input autocomplete="off" type="text" required class="form-control" value="{{ $admin->name }}" name="name" id="name">
            </div>
            <!-- ...the other form fields -->
            <input type="submit" class="btn btn-primary btn float-right" value="Update admin"/>
        </form>

//存储表单

<form id="create_admins" method="post" class="clearfix"
              action="{{route('admins.store', ['post_id' => $post->id])}}" >
            {{csrf_field()}}
            <div class="form-row">
                <div class="form-group col col-lg-6">
                    <label for="admins">Post admins</label>

                    @foreach($administrators as $admin)
                        <div class="form-check">
                            <input autocomplete="off" class="form-check-input radio" type="radio" name="radiobutton" value="{{ $admin->id }}" id="{{$admin->id}}">
                            <label class="form-check-label" for="exampleRadios1">
                                {{$admin->name}}
                            </label>
                        </div>
                    @endforeach

                    <div class="form-check">
                        <input autocomplete="off" class="form-check-input" type="radio" name="radiobutton" id="store_admin"
                               value="store_admin">
                        <label class="form-check-label" for="exampleRadios2">
                            Create new admin
                        </label>
                    </div>

                </div>
            </div>
            <div class="form-group">
                <label for="name">Name</label>
                <input autocomplete="off" type="text" required class="form-control" value="{{ old('name') }}" name="name" id="name">
            </div>
            <!-- ...the other form fields -->
            <input type="submit" class="btn btn-primary btn float-right" value="Store admin"/>
        </form>

JS：

$(document).ready(function () {
            // receive array with administrators details from the AdministratorController
            var admins = {!!  $administrators !!}

            $("#create_admins").hide();
            $("#update_admins").hide();

            $("input[name='radiobutton']").click(function() {
                let id = $(this).attr("id");

                if (id == "store_admin") {

                    $("input[name='name']").val("");
                } else {
                    let data = admins.find(e => e.id == id) || {
                        name: "",
                            ...
                    };

                    $("input[name='name']").val(data.name);
                    ...
                }
            });

            });

Answer 1

通过控制器操作识别表单

@if(\Route::getCurrentRoute()->getActionMethod()  == 'create')
    //show create form
@else
   //show edit form
@endif