检查与正在编辑的帖子对应的单选按钮，如果有验证错误，单击“更新”后

Question

我有一个视图，它在每个单选按钮中显示一个帖子名称，该名称对应于数据库中存在的每个帖子。在下方还有一个单选按钮，用于创建新帖子“创建新帖子”。

当单击与现有帖子对应的单选按钮时，表单字段将填充该帖子信息。当单击单选按钮“创建新帖子”时，表单字段变为空，因此用户可以介绍信息以创建新帖子。

如果用户选择单选按钮“创建帖子”并填写表单字段并单击“创建”，但他错误地填写了某些字段，例如日期格式不正确，这些字段不会被清除，因此用户不需要再次介绍他们。这很好用。

问题：但是当用户选择某个与现有帖子相对应的单选按钮时，表单字段将使用 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);
      ...
    }
    }); 

Answer 1

您可以在错误提交后使用 name='radiobutton' 检查旧输入的值，如果该值与帖子 ID 匹配，则将其标记为 checked，如果旧单选按钮值为 create_post，则检查创建新帖子单选按钮。

您可以从 Laravel 官方文档中了解更多关于 old inputs 的信息。

像这样：

 <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>