>我有一个视图,它在每个单选按钮中显示一个与数据库中存在的每个帖子相对应的文章名称。下面还有一个单选按钮,用于创建新帖子"创建新帖子"。
单击与现有帖子对应的单选按钮时,表单字段将填充该帖子信息。单击单选按钮"创建新帖子"时,表单字段变为空,以便用户可以引入信息以创建新帖子。
如果用户选择单选按钮"创建帖子"并填写表单字段并单击"创建",并且他错误地填写了某些字段,例如日期格式不正确,则不会清除这些字段,因此用户无需再次引入它们。这工作正常。
问题:但是,当用户选择与现有帖子对应的某个单选按钮时,表单字段将使用 JS 数据库中存储的帖子信息填充。如果用户更改表单的某些信息(例如日期字段),并引入格式不正确的日期,则会出现错误,但"创建帖子"单选按钮变为选中状态,因此用户不是继续在编辑所选帖子的上下文中,而是更改为上下文以创建新帖子,因为单选按钮"创建新帖子"变为选中状态。
你知道怎么解决吗?
包含每个帖子单选按钮和"创建新帖子"单选按钮以及其他表单字段的表单:
<form id="editposts" method="post"
action="{{route('posts.update', ['post_id' => $post->id])}}" enctype="multipart/form-data">
{{csrf_field()}}
<div>
@foreach($posts as $post)
<div class="form-check">
<input class="form-check-input radio" type="radio" name="radiobutton" value="{{ $post->id }}" id="{{$post->id}}">
<label class="form-check-label">
{{$post->title}}
</label>
</div>
@endforeach
</div>
<div class="form-check">
<input checked class="form-check-input" type="radio" name="radiobutton" id="create_post"
value="create_post">
<label class="form-check-label">
Create post
</label>
</div>
<!-- form fields, here is the name but are more like description, etc -->
<div class="form-group">
<label>Post title</label>
<input type="text" required class="form-control" value="{{ old('title') }}" name="title" id="tile">
</div>
<input type="submit" id="poststore" value="Create"/>
<input type="submit" id="postupdate" value="Update"/>
</form>
JS根据所选帖子填充表单字段,并根据所选单选按钮更改表单操作:
var posts = {!! $post !!}
$("#postupdate").hide();
$("input[name='radiobutton']").click(function() {
let id = $(this).attr("id");
if (id == "create_post") {
$("#postupdate").hide();
$("#poststore").show();
$("#editposts").attr('action', '{{route('posts.store', ['post_id' => $post->id])}}');
$("input[name='title']").val("");
...
} else {
$("#postupdate").show();
$("#poststore").hide();
$("#editposts").attr('action', '{{route('posts.update', ['post_id' => $post->id])}}');
let data = posts.find(e => e.id == id) || {
title: "",
...
};
$("input[name='title']").val(data.title);
...
}
});
您可以在错误提交后用name='radiobutton'
检查旧输入的值,如果该值与帖子 ID 匹配,则将其标记为checked
,以防旧单选按钮值create_post您检查创建新帖子单选按钮。
您可以从官方Laravel文档中阅读有关旧输入的更多信息。
喜欢这个:
<form id="editposts" method="post"
action="{{route('posts.update', ['post_id' => $post->id])}}" enctype="multipart/form-data">
{{csrf_field()}}
<div>
@foreach($posts as $post)
<div class="form-check">
<input {{ (old('radiobutton') && old('radiobutton') == $post->id) ? 'checked' : '' }} class="form-check-input radio" type="radio" name="radiobutton" value="{{ $post->id }}" id="{{$post->id}}">
<label class="form-check-label">
{{$post->title}}
</label>
</div>
@endforeach
</div>
<div class="form-check">
<input {{ (old('radiobutton') && old('radiobutton') == 'create_post') ? 'checked' : '' }} class="form-check-input" type="radio" name="radiobutton" id="create_post"
value="create_post">
<label class="form-check-label">
Create post
</label>
</div>
<!-- form fields, here is the name but are more like description, etc -->
<div class="form-group">
<label>Post title</label>
<input type="text" required class="form-control" value="{{ old('title') }}" name="title" id="tile">
</div>
<input type="submit" id="poststore" value="Create"/>
<input type="submit" id="postupdate" value="Update"/>
</form>