Question

我有一个显示一些无线电按钮的视图，每个单选按钮都有一个与数据库中存在的每个帖子对应的标题。下面还有一个单选按钮，用于创建新帖子“创建新帖子”。

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

但是当这个页面首先被激活时，表单字段出现了，但我只想首先显示单选按钮，然后只显示基于所选单选按钮的其他表单字段，如果“创建新帖子” “单选按钮被选中显示带有空表单字段的表单，如果选择了与帖子对应的单选按钮，我想显示带有填充字段的表单。

您知道如何仅在选择单选按钮时显示表单，而不是在页面被访问时首先显示表单吗？

表格，每个帖子单选按钮和“创建新帖子”单选按钮和其他表单字段：

<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

使用css并应用display:none;然后使用jquery / js在单选按钮点击下面的内容时使表单可见。

$('.yourradiobutton').click(function(){
    $('.yourform').show();
    // ..........
});

Answer 2

这将使b / c隐藏输入本身，而不是有效隐藏整个表单的形式，包括单选按钮。

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

添加了CSS

.post_form_controls,#poststore,#postupdate {
  display: none;
}

添加了jQuery

...
$('.post_form_controls').show();
$('input[type="submit"]').hide();
$('#poststore').show(); // or $('#postupdate').show() using whatever logic you want;
...

编辑：根据您在下面问题中的评论，我会查看jQuery get value of selected radio button。听起来你想要使用checked而不是click事件。

仅在选择单选按钮时显示表单

2 个答案: