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

Stack Overflow用户

提问于 2018-02-24 07:11:52

回答 1查看 624关注 0票数 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，但它不完整，我不知道如何在表单字段中显示每个选定管理员的信息，也许可以通过追加方法来完成，但是如何正确地做到这一点呢？因为表单字段有. form -row类，其他人没有，所以我对这部分有疑问。

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>

javascript

jquery

平台电商解决方案

为客户提供电商客服、电商图片系统识别及搜索的快速搭建方案

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-24 07:25:16

可以使用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">