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