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

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

我希望当每个单选按钮（管理员）被选中时，在表单字段（名称，电子邮件等）中显示每个所选管理员的信息，以便可以更改管理员详细信息，然后使用“更新管理员”按钮进行更新。这部分我没有成功做到这一点。你知道怎么做这个部分吗？

我在下面有这个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">

显示表单字段基于单选按钮选择的数据

1 个答案: