0

I have a view where are shown some radio buttons, each one correspond to a post that exist in database. And below there is also a radio button to create a new post "create new post". When the page is acessed the "create new post" radio button is checked and so the other form fields below are empty.

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.

If the user selects the radio button "Create post" and fill the form fields and click "create" and he filled some field incorrectly, for example with a incorrect date format, the fields are not cleared so the user dont need to introduce them again and the "create new post" radio button remains checked. This works fine.

Issue: But when a user select some radio button that corresponds to a existing post, the form fields are populated with the post stored info in the database using JS. If the user change some info of the form, for example the date field, and introduce a date with a incorrect format, it appears an error, but the "create post" radio button becomes checked, and so instead of the user continue in the context of edit the selected post he changes for a context to create a new post because the radio button "create new post" becomes checked.

Do you know how to fix that?

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 {{ (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 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);
      ...
    }
    }); 
2
  • 1
    If you are not using any Ajax to validate, please create a minimal reproducible example WITHOUT any PHP or template stuff using the <> snippet editor and explain expected and actual output Commented Mar 28, 2018 at 15:10
  • Thanks, but the error is when the form data is submited while updating a post and there is validation error the radio button "create new post" become checked instead of the radio button that corresponds to the post being edited continues checked, so maybe is not possible to create a example without server code? Commented Mar 28, 2018 at 15:16

1 Answer 1

1

You have double checked the radio button by default:

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

remove it and change to:

<input {{ (old('radiobutton') && old('radiobutton') == 'create_post') ? 'checked' : '' }} class="form-check-input" type="radio" name="radiobutton" id="create_post"
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks but like that, for example a existing post is clicked, we change the title and click update the page is refereshed and no radio button appears selected neither the "create new post" nor the radio button that corresponds to post being edited.
Also if a new post is created, the page is refreshed and no radio button appear selected.
you can add a flag inside foreach, to see if any edit post radio button checked, if none of them checked, check the create post radio button
1. define a flag: $isAnyPostButtonChecked = false;, 2. check any radio button check $isAnyPostButtonChecked = $isAnyPostButtonChecked && (old('radiobutton') && old('radiobutton') == $post->id) 3. check create post button if none of edit post button check, use this flag $isAnyPostButtonChecked
check the docs and see how passing the variable from controller to view (laravel.com/docs/5.6/views#passing-data-to-views)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.