如何将此表单划分为两种形式，一种用于更新一种用于存储，而不重复不必要的代码

Question

我有一个页面来编辑帖子的管理员。在此页面中，可以更新帖子的管理员，但也可以为帖子创建新的管理员。

在这个页面中有一些单选按钮。每个单选按钮对应一个帖子的管理员。选择单选按钮后，将在表单字段中填充该管理员的详细信息。还有一个单选按钮“创建新管理员”，当选择时，表单字段重置，以便用户可以插入值来创建新的管理员。

在这个页面中，我有下面的表格，允许更新，并根据单选按钮选择创建一个新的管理员。如果选择的单选按钮是“创建新管理员”，则会重置字段，以便用户可以插入新的管理员。如果选择了其他单选按钮，则在表单字段中显示所选管理员的详细信息。

怀疑：

我有一些JS基于单选按钮选择更改窗体的操作，但我得到了这种方法的一些问题所以我试图将下面的代码分成两种不同的形式，而不是只有一种形式。

所以我想要一个表单进行更新，另一个表单来存储管理员。当页面被访问时，不应该呈现任何形式，只有单选按钮。然后，当用户通过单选按钮选择管理时，应该显示更新表单。如果用户选择“创建新管理员”单选按钮，则应显示商店表单，如果可见，则更新表单隐藏。

但我对如何正确地做到这一点有一些疑问，如何正确地完成这一点，因此可以重用一些代码。例如，重复两次此代码似乎不正确：

@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

更新和创建的表单：

 <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: "",
                ...
            };

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

Answer 1

如果我理解得很好，你想“将下面的代码划分为两种不同的形式，而不仅仅是一种形式”。

通常我会建议使用Laravel-Collective Form类，它带有Form :: open和Form :: model（用于Form Model Binding）。

使用刀片模板引擎指令@include这两种方法，您可以编写一个部分块并随时重复使用它，只需创建一个部分文件（例如form-b​​ody.blade.php）与表单的主体（部件）在打开“form”标签和“input type ='submit'”之间。

请注意，两个（集体表格和刀片）不需要一起使用，如果您愿意或两者都可以只使用其中一个（我建议两者都最大化代码的写入速度）。

就像是：

    {!! Form::open(['url' => 'foo/bar', 'method' => 'put']) !!}
    @include('form-body.blade.php')
    {!! Form::submit('Save') !!}
    {!! Form::close() !!}

要么

    {!! Form::model($user, ['route' => ['user.update', $user->id]]) !!}
    @include('form-body.blade.php')
    {!! Form::submit('Update') !!}
    {!! Form::close() !!}

希望这对你有所帮助。

Answer 2

• 使用相同的表格。
• 表单应包含隐藏字段id
• 在控制器逻辑上： 如果设置了id，则更新相应的行。 如果id为空，则创建一个新行。

Answer 3

我会解决那个服务器端

<?php
if( $_POST['radiobutton'] == 'value2' ) {
   // create
}
else {
   // update
}
?>