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

You need to put your inputs outside of the form, or either just concern yourself with hiding the inputs themselves. — Jay Jordan, Mar 27 '18 at 15:52

score 1 · Answer 1 · answered Mar 27 '18 at 15:47

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

answered Mar 27 '18 at 15:47

fayis003

680
4
10

Thanks but like that, for example if "create new post" is clicked, the user insert the data for each field and clicks "store", if there is some validation error, the form disappears, and should not. And for the form appear again is necessary to refresh the page and click again in "create new post", or if there are existing posts, click in a existing post and click again in the "create new post", but the user needs to introduce all the info, the fields become empty. – johnW Mar 27 '18 at 15:56
what kind of validation are you using basic HTML validations or some plugins like jquery validate? – fayis003 Mar 27 '18 at 16:02
1

This won't work because the radio buttons are inside of the form you would be hiding. I'm reading into it, but b/c you're using radio buttons, I'd imagine you want to toggle between the two hiding one and showing the other. – Jay Jordan Mar 27 '18 at 16:05

Jay Jordan · Accepted Answer · 2018-03-27T22:27:41.850

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.

Thanks, but it seems that is not working, when the page is acessed the form is visible, and it seems that it always visible. — johnW, Mar 27 '18 at 16:17
Your radio buttons are inside the form, so we can't hide that. My example is attempting to show hide the submit button you're using. You would just use additional logic to decide if it gets prepopulated. — Jay Jordan, Mar 27 '18 at 18:09

Show the form only when a radio button is selected

2 Answers2