Show the form only when a radio button is selected

Question

I have a view that shows some radio butons, each radio button has a title that corresponds to each post that exist in database. And below there is also a radio button to create a new post "create new post".

When a radio button that corresponds to an existing post is clicked the form fields are populated with that post info. When the radio button "create new post" is clicked the form fields become empty so the user can introduce info to create a new post.

But when this page is acessed at first the form fields are appearing, but I just want to show at first the radio buttons, and then only show the other form fields based on the radio button selected, if the "create new post" radio button is selected show the form with empty form fields, if a radio button that corresponds to a post is selected I want to show the form with the populated fields.

Do you know how to only show the form when a radio button is selected and not at first when the page is acessed?

Form with each post radio button and "create new post" radio button and the other form fields:

<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 to populate the form fields based on selected post and to change form action based on radio button selected:

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

use css and apply display:none; then use jquery/js to make the form visible when the radio button clicked something like below.

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

Answer 2

This will work b/c it's hiding the inputs themselves, and not the form which would effectively hide the entire form, radio buttons included.

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

Added CSS

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

Added jQuery

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

Edit: Based on your comment in a question below, I would check out jQuery get value of selected radio button . Sounds like you want to use checked instead of click event.