Javascript 仅当选择相应的单选按钮时才显示管理员的详细信息?
我有一个页面可以编辑帖子的管理员。 在这个页面中有一些单选按钮。每个单选按钮对应一个帖子的管理员。选择单选按钮后,将在表单字段中填充该管理员的详细信息 问题是,当用户访问帖子页面的编辑管理员时,不应选中任何单选按钮,因此单选按钮中没有checked属性。这没关系 但是,尽管没有选中任何单选按钮,但在表单字段中,默认情况下会显示最初访问页面时最后创建的管理员的详细信息。然后,如果我选择“其他管理员”,则会显示所选管理员的详细信息,但当页面首先被访问且表单字段中未选中单选按钮时,会显示上次创建的管理员的详细信息 您知道如何仅在选择相应的单选按钮时显示管理员的详细信息吗 全文: //管理员控制器编辑方法,该方法使用上面的编辑管理员窗体返回视图: //更新和存储管理路由 //管理员控制器更新方法: //管理员控制器存储方法:Javascript 仅当选择相应的单选按钮时才显示管理员的详细信息?,javascript,php,jquery,laravel,Javascript,Php,Jquery,Laravel,我有一个页面可以编辑帖子的管理员。 在这个页面中有一些单选按钮。每个单选按钮对应一个帖子的管理员。选择单选按钮后,将在表单字段中填充该管理员的详细信息 问题是,当用户访问帖子页面的编辑管理员时,不应选中任何单选按钮,因此单选按钮中没有checked属性。这没关系 但是,尽管没有选中任何单选按钮,但在表单字段中,默认情况下会显示最初访问页面时最后创建的管理员的详细信息。然后,如果我选择“其他管理员”,则会显示所选管理员的详细信息,但当页面首先被访问且表单字段中未选中单选按钮时,会显示上次创建的管理
我建议通过backed从ajax获取管理员数据,然后填写到表单中
let id = $(this).attr("id");
您有一个管理员id,创建一个接受id的新路由,并将管理员数据返回到json中
然后通过
$("input[name='name']").val(data.name);
$("input[name='date']").val(data.date);
如果遇到任何问题,请发表评论,我将帮助您找到新答案
旧答案
原因是当您重定向回它已经使用编辑函数的获取路径获取最后存储的数据时。尝试不传递id,并检查是否有表单/字段
尝试重定向到一个路径,即
使用
而不是
return redirect()->back();
字段名称、电子邮件等的值属性最初应为空。你不需要
value="{{ $admin->name }}"
在初始加载时,因为您正在单选按钮单击事件中设置值。相反,它应该是:
value=""
例如:
<div class="form-group">
<label for="name">Name</label>
<input type="text" required class="form-control" value="" name="name">
</div>
谢谢,但举个例子,在这一部分中,var admins={!!$admin!!}控制器向视图发送已经拥有帖子所有管理员的数组管理员,那么它是必要的ajax吗?单击单选按钮时,所选管理员的详细信息将显示在表单字段中。问题是,当首次访问此页面时,表单字段将填充上次创建的管理员的详细信息,但未选择radio Button administrator,因此表单字段应为空。您可以清空model close Event的所有字段谢谢您的回答,您能解释如何执行此操作吗?$myModal.onhidden,函数{$'result'.html'yes,result';}谢谢,但我不明白。你能解释得更好吗?给你的表单输入加上AutoToalOr=。谢谢你的回答,但是我得到了同样的问题。你考虑把JavaScript逻辑转换成Ajax请求吗?如果是的话,让我知道,也许我可以为你做逻辑。在我看来,它可以让你以更简单的方式做你想做的事。谢谢你的回答。是的,但我已经尝试将这个工作示例转换为ajax,但我不知道如何正确地转换。我有这个$input[name='radiobutton']。单击函数{let id=$this.attrid;$。获取'post/edit/'+id+'/admins',函数管理员{};};但我怀疑它是否正确,以及在获取管理员详细信息后,如何使用所选管理员单选按钮详细信息填充表单字段。您是否尝试过@MajidFouladpour建议??您应该首先尝试它以防止表单缓存。如果您执行此操作返回重定向“post/edit//admins”,会发生什么情况;谢谢,我在proj、 test/post/edit/2/admins被访问最后创建的管理员详细信息出现在表单字段上。不要传递id 2,传递时不带id。当你切换单选按钮时,你可以通过传递id进行api调用或重新加载页面谢谢,但像这样,页面似乎找不到,因为在路由中我也传递id,并且似乎有必要be因为需要编辑特定帖子的管理员,因为管理员是特定帖子的管理员,在本例中为帖子2。
let id = $(this).attr("id");
$("input[name='name']").val(data.name);
$("input[name='date']").val(data.date);
<form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
{{csrf_field()}}
<div class="hide-first">
@foreach($administrators $admin)
<div class="form-check">
<input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="option1">
<label class="form-check-label" for="">
{{$admin->name}}
</label>
</div>
@endforeach
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
value="option2">
<label class="form-check-label" for="exampleRadios2">
Create new administrator
</label>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
</div>
<!-- below I have more form fields like administrator name, email, etc -->
<input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
<input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
</form>
$(document).ready(function () {
$('.hide-first).hide();
$("#adminStoreButton").hide();
var admins = {!! $admin !!}
$("input[name='radiobutton']").click(function() {
$('.hide-first).show();
if($(this).attr("id") == "create_administrator"){
$("#adminUpdateButton").hide();
$("#adminStoreButton").show();
$("#edit_administrator").attr('action','{{route('admins.store', ['post_id' => $post->id])}}');
}
else{
$("#adminUpdateButton").show();
$("#adminStoreButton").hide();
$("#edit_administrator").attr('action','{{route('admins.update', ['post_id' => $post->id])}}');
}
let id = $(this).attr("id");
let data = admins.find(e => e.id == id) || {
name: "",
email: "",
...
date: "",
};
$("input[name='name']").val(data.name);
$("input[name='email']").val(data.email);
...
$("input[name='date']").val(moment(data.date).format('DD MMMM YYYY - HH:mm'));
});
});
return redirect('post/edit//admins');
return redirect()->back();
value="{{ $admin->name }}"
value=""
<div class="form-group">
<label for="name">Name</label>
<input type="text" required class="form-control" value="" name="name">
</div>