根据单选按钮选择显示表单字段数据

Question

一个帖子可以有多个管理员，通常是 4 或 5 个管理员。我有一个表单来编辑帖子的管理员。

这个表单有一些单选按钮。每个单选按钮对应一个帖子的管理员。

例如，如果 ID 为“1”的帖子有 4 位管理员，那么它应该出现在此编辑管理员页面的 4 单选按钮中。每个单选按钮都有一个帖子管理员的名称。这是使用“@foreach($administrators as $admin)...endforeach”的一部分：

@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

然后，在单选按钮下方，表单有一些字段，我想在这些字段中显示每个选定管理员的信息（单选按钮）。

我希望，当每个广播按钮（管理员）在表单字段（名称，电子邮件等）中选择时，每个选定的管理员的信息可以更改管理员详细信息，然后使用“ Update Admin”按钮更新。这部分我没有成功。你知道如何正确地做这部分吗？

我在下面有这个 js，但它不完整我不知道如何在表单字段中显示每个选定管理员的信息，也许它可以使用 append 方法但是如何正确地做到这一点？因为表单字段有类 .form-row 其他人没有所以我对这部分有疑问。

JS

var admins = {!! $administrators !!} // $administrators is an array created from server

var id = $(".radio:checked").attr('id');

for ( var i = 0; i < admins.length; i++ ) {

    if(id==admins[i].id){
    }
}

在源 admins 变量中具有这种格式：

var admins = [{"id":3,"name":"John","email":"emailtest1@test.email"},{"id":5,"nome":"Kate","email":"emailtest2@test.email","..."}]

完整形式：

<form method="post" class="clearfix">
      <div class="form-row">
        <div class="form-group">
          <label for="administrator">Administrators</label>

          @foreach($administrators as $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>
      </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" required class="form-control" value="{{ $admin->name}}" name="name" id="name">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="number" min="1"
               required class="form-control" value="{{ $admin->email }}"
             name="email" id="email">
      </div>

      <div class="form-row">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" 
                       required class="form-control" value="{{ $admin->username}}"
                       name="username" id="username">
            </div>
            <div class="form-group">
                <label for="img">Image</label>
                <input type="file"
                       required class="form-control"
                       name="img" id="img">
            </div>
        </div>
      <!-- more fields -->
      </div>
    <input type="submit" class="btn btn-primary" value="Update admin"/>
    </form>

Answer 1

您可以使用find 从数组中查找id。

$(function() {
  var admins = [{"id":3,"name":"John","email":"emailtest1@test.email"},{"id":5,"name":"Kate","email":"emailtest2@test.email"}];

  $("input[name='radiobutton']").click(function() {
    let id = $(this).attr("id");

    //Find the id from the array, if not found, use a default value
    let data = admins.find(e => e.id == id) || {name: "", email: ""};

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-check">
  <input class="form-check-input" type="radio" name="radiobutton" id="3" value="">
  <label class="form-check-label" for="">
        John
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radiobutton" id="5" value="">
  <label class="form-check-label" for="">
        Kate
  </label>
</div>

<input type="text" required class="form-control" value="" name="name" id="name">
<input type="text" min="1" required class="form-control" value="" name="email" id="email">