【发布时间】:2018-03-05 20:38:10
【问题描述】:
我有一个页面可以编辑帖子的管理员。
在这个页面中有一些单选按钮。每个单选按钮对应一个帖子的管理员。选择单个按钮时,该管理员的详细信息在表单字段中填充。
当用户访问帖子页面的此编辑管理员时,默认情况下不应选中单选按钮,因此我在单选按钮中没有“已选中”属性。
在此页面中,我想要 2 个表单,一个用于更新的表单和一个用于存储管理员的表单。
因此,例如,当用户访问此页面时,例如有 3 个单选按钮:John、Jake、创建新管理员。如果选择了与用户 John 对应的单选按钮,则更新表单应该会出现,其中的表单字段填充了 John 管理员详细信息,对于 Jake amdin 也是如此。如果“创建新管理员”单选按钮 选择它应该会出现带有重置表单字段的商店表单。
问题是当用户访问帖子页面的此编辑管理员时,不会出现单选按钮,因此无法选择任何单选按钮,因此不会出现表单。您知道如何正确组织这两个表单,以便在选择对应的单选按钮时显示每个表单吗?
//更新表单
<form id="update_admins" method="post" class="clearfix"
action="{{route('admins.update', ['post_id' => $post->id])}}" >
{{csrf_field()}}
<div class="form-row">
<div class="form-group col col-lg-6">
<label for="admins">Post admins</label>
@foreach($administrators as $admin)
<div class="form-check">
<input autocomplete="off" class="form-check-input radio" type="radio" name="radiobutton" value="{{ $admin->id }}" id="{{$admin->id}}">
<label class="form-check-label" for="exampleRadios1">
{{$admin->name}}
</label>
</div>
@endforeach
<div class="form-check">
<input autocomplete="off" class="form-check-input" type="radio" name="radiobutton" id="update_admin"
value="update_admin">
<label class="form-check-label" for="exampleRadios2">
Create new admin
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="name">Name</label>
<input autocomplete="off" type="text" required class="form-control" value="{{ $admin->name }}" name="name" id="name">
</div>
<!-- ...the other form fields -->
<input type="submit" class="btn btn-primary btn float-right" value="Update admin"/>
</form>
// 存储表单
<form id="create_admins" method="post" class="clearfix"
action="{{route('admins.store', ['post_id' => $post->id])}}" >
{{csrf_field()}}
<div class="form-row">
<div class="form-group col col-lg-6">
<label for="admins">Post admins</label>
@foreach($administrators as $admin)
<div class="form-check">
<input autocomplete="off" class="form-check-input radio" type="radio" name="radiobutton" value="{{ $admin->id }}" id="{{$admin->id}}">
<label class="form-check-label" for="exampleRadios1">
{{$admin->name}}
</label>
</div>
@endforeach
<div class="form-check">
<input autocomplete="off" class="form-check-input" type="radio" name="radiobutton" id="store_admin"
value="store_admin">
<label class="form-check-label" for="exampleRadios2">
Create new admin
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="name">Name</label>
<input autocomplete="off" type="text" required class="form-control" value="{{ old('name') }}" name="name" id="name">
</div>
<!-- ...the other form fields -->
<input type="submit" class="btn btn-primary btn float-right" value="Store admin"/>
</form>
JS:
$(document).ready(function () {
// receive array with administrators details from the AdministratorController
var admins = {!! $administrators !!}
$("#create_admins").hide();
$("#update_admins").hide();
$("input[name='radiobutton']").click(function() {
let id = $(this).attr("id");
if (id == "store_admin") {
$("input[name='name']").val("");
} else {
let data = admins.find(e => e.id == id) || {
name: "",
...
};
$("input[name='name']").val(data.name);
...
}
});
});
【问题讨论】: