【问题标题】:show different forms based on radio button selection is not working properly根据单选按钮选择显示不同的表单无法正常工作
【发布时间】:2018-03-05 20:38:10
【问题描述】:

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

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

当用户访问帖子页面的此编辑管理员时,默认情况下不应选中单选按钮,因此我在单选按钮中没有“已选中”属性。

在此页面中,我想要 2 个表单,一个用于更新的表单和一个用于存储管理员的表单。

因此,例如,当用户访问此页面时,例如有 3 个单选按钮:John、Jake、创建新管理员。如果选择了与用户 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);
                    ...
                }
            });

            });

【问题讨论】:

    标签: php jquery laravel


    【解决方案1】:

    通过控制器动作识别表单

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-05
      • 2013-11-11
      • 2021-11-21
      • 1970-01-01
      相关资源
      最近更新 更多