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

Question

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

3

一个帖子可以有多个管理员，通常为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){
    }
}

在源管理员变量中，其格式如下：

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>

- user9297268

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eddie · 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">