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

我有一个页面可以编辑帖子的管理员。
在此页面中，有一些单选按钮。每个单选按钮对应于帖子的管理员。选择单选按钮时，该管理员的详细信息将填充在表单字段中

问题是，当用户访问帖子页面的此编辑管理员时，不应选中任何单选按钮，因此我在单选按钮中没有“ checked”属性。还行吧。

但是，尽管未选中任何单选按钮，但是默认情况下，在表单字段中会默认显示最初访问该页面时最后创建的管理员的详细信息。然后，如果我选择其他管理员，则将显示该所选管理员的详细信息，但是当首先进入该页面且未在表单字段中选中任何单选按钮时，将显示最后创建的管理员的详细信息。

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

完整形式：

<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'));

    });
});

//管理员控制器的edit方法，该方法返回带有上面的edit administrators表单的视图：

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();
}

参考方案

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

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

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

value=""

如：

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

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

保留文本区域的数据或值，然后选择输入 - javascript

通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

当<form>'.submit'函数被覆盖时(使用Ajax)将数据获取到php吗？ - javascript

我已覆盖此网页上表单的.submit函数，因为该网页已加载在“ index.php”中的#mainContent内，并且我希望“提交”按钮仅替换此#mainContent。我正在尝试将数据从此表单获取到.php文件，以便对数据库进行查询（或简单地回显已填充的变量，以指示已传递数据）。我是AJAX的新手。有人可以向我解释如何将数据传递到.php文件，或者指向要…

如何调用超链接单击中包含单引号的消息的JavaScript警报？ - javascript

我陷入了javascript问题。我正在使用C＃编写可以调用javascript来显示警报消息的超链接。请参阅下面的代码以了解它是如何完成的：首先，这是C＃从服务器端编写的代码：//Server side code string myHyperlink = "<a href='#' onclick=\"alert…

如何使整个<div>可选？ - javascript

我看过几篇有关使整个div可点击的文章，但我希望使其成为可选择的。我所拥有的是一个php while循环，该循环显示基于用户进入mySQL数据库的表。该代码如下所示： <div class='tracksub'> <div class='headname'><div class='…