Question

我有一个页面来编辑帖子的管理员。在这个页面中有一些单选按钮。每个单选按钮对应一个帖子的管理员。选择单选按钮后，将在表单字段

中填充该管理员的详细信息

问题是当用户访问帖子页面的编辑管理员时，不应该选中单选按钮，所以我没有检查＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;＆＃34;单选按钮中的属性。没关系。

但是虽然没有选中单选按钮，但是在表单字段中默认显示最初创建的管理员在首次访问页面时的详细信息。然后，如果我选择其他管理员，则会显示所选管理员的详细信息，但是当首次登记页面并且在表单字段中未选中任何单选按钮时，将显示上次创建的管理员的详细信息。

您是否知道如何在选择相应的单选按钮时显示管理员的详细信息？

完整格式：

<form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
    {{csrf_field()}}
    @foreach($administrators $admin)
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="">
            <label class="form-check-label" for="">
              {{$admin->name}}
            </label>
          </div>
    @endforeach
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
             value="option2">
      <label class="form-check-label" for="exampleRadios2">
          Create new administrator
      </label>
  </div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
  </div>

  <!-- below I have more form fields like administrator name, email, etc -->

  <input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
  <input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
  </form>

JS：

 $(document).ready(function () {

    $("#adminStoreButton").hide();

    var admins = {!!  $admin !!}

    $("input[name='radiobutton']").click(function() {

        if($(this).attr("id") == "create_administrator"){
            $("#adminUpdateButton").hide();
            $("#adminStoreButton").show();
            $("#edit_administrator").attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');
        }
        else{
            $("#adminUpdateButton").show();
            $("#adminStoreButton").hide();
            $("#edit_administrator").attr('action', '{{route('admins.update', ['post_id' => $post->id])}}');

        }

        let id = $(this).attr("id");
        let data = admins.find(e => e.id == id) || {
            name: "",
            email: "",
            ...
            date: "",
        };

        $("input[name='name']").val(data.name);
        $("input[name='email']").val(data.email);
       ...
        $("input[name='date']").val(moment(data.date).format('DD MMMM YYYY - HH:mm'));

    });
});

//使用上面的编辑管理员表单返回视图的管理员控制器编辑方法：

public function edit($id)
{
    $post = Post::find($id);
    $administrators = Administrator::where('post_id', $id)->get();

    return view('administrators.edit')
        ->with('post', $post)
        ->with('administrators', $administrators));
}

//更新并存储管理员路线

Route::get('post/edit/{id}/admins',    [ 'uses' => 'AdminController@edit', 'as'=>'admins.edit']);
Route::post('post/update/{id}/admins', [ 'uses' => 'AdminController@update', 'as'=>'admins.update']);
Route::post('post/store/{id}/admins', [ 'uses' => 'AdminController@store', 'as'=>'admins.store']);

//管理员控制器更新方法：

public function update(Request $request, $id){

        $this->validate($request, [
            'name' => 'required|string',
          ...
        ]);

        $adminToUpdate = Administrator::find($request->radiobutton);

        $adminToUpdate->name = $request->name;
        ...

        $adminToUpdate->save();

        return redirect()->back();
    }
}

//管理员控制器存储方法：

public function store(Request $request, $id){
    $this->validate($request, [
        'name' => 'required|string',
    ]);

    $post = Post::find($id);

    Administrator::create([
        'name' => $request->name,
        'post_id' => $post->id
    ]);

    return redirect()->back();
}

Answer 1

我建议通过支持从ajax获取admin的数据，然后填写表单。

let id = $(this).attr("id");

你有一个管理员ID，创建接受id的新路由并将管理数据返回到json

然后通过

填充数据

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

如果有任何问题，请发表评论，我会帮助你

Answer 2

新答案

<form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
    {{csrf_field()}}
    <div class="hide-first">
        @foreach($administrators $admin)
            <div class="form-check">
                <input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="option1">
                <label class="form-check-label" for="">
                   {{$admin->name}}
                </label>
            </div>
         @endforeach
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
         value="option2">
       <label class="form-check-label" for="exampleRadios2">
           Create new administrator
       </label>
     </div>
     <div class="form-group">
        <label for="name">Name</label>
        <input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
     </div>
     <!-- below I have more form fields like administrator name, email, etc -->
     <input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
     <input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
</form>

JS

$(document).ready(function () {

    $('.hide-first).hide();

    $("#adminStoreButton").hide();

    var admins = {!!  $admin !!}

    $("input[name='radiobutton']").click(function() {

        $('.hide-first).show();

        if($(this).attr("id") == "create_administrator"){
            $("#adminUpdateButton").hide();
            $("#adminStoreButton").show();
            $("#edit_administrator").attr('action','{{route('admins.store', ['post_id' => $post->id])}}');
        }
        else{
            $("#adminUpdateButton").show();
            $("#adminStoreButton").hide();
            $("#edit_administrator").attr('action','{{route('admins.update', ['post_id' => $post->id])}}');

        }

        let id = $(this).attr("id");
        let data = admins.find(e => e.id == id) || {
            name: "",
            email: "",
            ...
            date: "",
        };

        $("input[name='name']").val(data.name);
        $("input[name='email']").val(data.email);
       ...
        $("input[name='date']").val(moment(data.date).format('DD MMMM YYYY - HH:mm'));

     });
});

OLD ANSWER

原因是当您重定向已经使用编辑功能的获取路径获取最后存储的数据时。尽量不要传递id并检查即将发布的表单/字段。

而不是重定向返回尝试重定向到路径，即

使用

return redirect('post/edit//admins');

而不是

return redirect()->back();

Answer 3

您的字段（姓名，电子邮件等）的值属性最初应为空白。你不需要

value="{{ $admin->name }}"

初始加载时，因为您在单选按钮单击事件中设置了值。相反，它应该是：

value=""

如：

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" required class="form-control" value="" name="name">
</div>

仅在选择相应的单选按钮时显示管理员的详细信息？

3 个答案: