基于单选按钮的更改表单操作无法正常工作

Question

我有一个表单，允许用户编辑帖子的管理员，但也为帖子创建新的管理员。

这个表单有一些单选按钮。每个单选按钮对应一个帖子的管理员。单击某个单选按钮（管理员）时，将在表单域中填充管理员的详细信息。单击“更新”按钮时，将更新管理员的详细信息。

这部分工作正常。

怀疑：

但是有一个静态单选按钮，“创建新管理员”，允许创建一个新的管理员。选择此单选按钮后，表单字段将被重置，以便用户在单击“存储”按钮时可以插入值以创建新管理员。

我有下面的jQuery来改变基于单选按钮选择的表单操作。

使用此js部分更改基于所选单选按钮的表单操作，代码无法正常工作，有3个问题：

• 当选择管理员（单选按钮）时，表单字段不会填充该管理员详细信息（这在插入js部分以根据单选按钮选择更改表单操作之前工作正常）
• 此外，当选择“创建新管理员”单选按钮时，不会重置表单字段。
• 单击“存储”按钮时，它也会出现并出现错误：“从空值创建默认对象”。

形成：

<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>

jQuery：根据单选按钮选择显示管理员的详细信息，隐藏和显示存储/更新按钮，并根据单选按钮选择更改表单操作

   var admins = {!!  $administrators !!}

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

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

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

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

//更新管理员路由

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 edit($id)
    {
        $post = Post::find($id);
        $administrators = Administrator::where('post_id', $id)->get();

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

管理员控制器存储方法

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

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

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

    return redirect()->back();

}

Answer 1

这是一个答案是我和Jon之间的合作努力。

将问题分成不同的部分。

1）当你处理多个同名的复选框/单选按钮时，你应该只考虑而不是名字。

修复1：

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

$(document).on('click', input[name^=radiobutton]", function () {}

2）Laravel预装了Lodash。随时随地使用它。

修复2：

var admins = {!!  $administrators !!}
let id = $(this).attr("id");

let data = administrators.find(e => e.id == id) || {
        name: "",
       email: "",
       ...: ""
};

replace this logic with _.find method of lodash.

var admins = {!!  $administrators !!}
var admin_data = _.find(admin, function(o) { return o.id < SOME_ID_VALUE; });

3）表单没有ID属性。分配ID，以便它可用于设置表单的操作属性。

修复3：

<form id="admin-form">

Change your code
//Remove this entirely
form.attr('action', '{{route('admins.store', ['post_id' => $post->id])}}');

//Replace with following lines of code.
//Route is upto you. Whichever route you want to pass.
var url = "{{route('admins.update', ['post_id' => $post->id])}}"; form.attr('action', url);

建议当您在同一表单中处理编辑和创建时，请尝试避免多个路由。

这里的路线可以像这样处理。 Route::post('post/update/{id}/admins/{adminID?}', [ 'uses' => 'AdminController@update', 'as'=>'admins.update']);

$ admingID是可选的，如果不传递则为null，因此您应该创建新的管理员记录，否则更新现有管理员的记录。