如果验证错误无法正常工作,请检查单选按钮

时间:2018-03-28 14:58:51

标签: javascript php jquery html laravel

我有一个视图,其中显示了一些单选按钮,每个按钮对应于数据库中存在的帖子。下面还有一个单选按钮,用于创建新帖子"创建新帖子"。当页面被访问时,"创建新帖子"选中单选按钮,因此下面的其他表单字段为空。

单击与现有帖子对应的单选按钮时,表单字段将填充该帖子信息。当单选按钮"创建新帖子"单击表单字段变为空,以便用户可以引入信息以创建新帖子。

如果用户选择单选按钮"创建帖子"并填写表单字段,然后单击"创建"并且他错误地填充了一些字段,例如日期格式不正确,字段未被清除,因此用户不需要再次引入它们并且"创建新帖子"单选按钮保持选中状态这很好。

问题但是当用户选择与现有帖子相对应的某个单选按钮时,表单字段会使用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 {{ (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 checked checked {{ (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>

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);
      ...
    }
    }); 

1 个答案:

答案 0 :(得分:1)

默认情况下,您有两个SELECT Max(NZ(DateAdd('m', i.[Service Period], w.[Work Date]), DateAdd('m', i.[Service Period], i.[Purchase Date])) ) AS NextServiceDate, i.Equipement FROM Inventory i LEFT JOIN WorkDone w ON i.ID = w.Equipment GROUP BY i.Equipement 单选按钮:

checked

将其删除并更改为:

<input checked checked {{ (old('radiobutton') && old('radiobutton') == 'create_post') ? 'checked' : '' }} class="form-check-input" type="radio" name="radiobutton" id="create_post"