rails コメント機能実装中でpost_idがnilとなり保存ができない状態です。

Question

前提・実現したいこと

rails でAjaxを使ったコメント機能を実装中です。
コメントがちゃんと表示されるか確認しようと思いコメントを入力後送信してみると画面に何の変化もありませんでした。
binding.pryを使って確認をしてみるとpost_idがnilとなっていたのでこれが原因かなと思いました。
保存がきちんと行われて内容がブラウザに表示されるようにしたいです。

該当のソースコード

controllers/comment_controller.rb

class CommentsController < ApplicationController

  def create
    comment = Comment.create(comment_params)
    render json:{comment: comment}
  end

  private
  def comment_params
    params.require(:comment).permit(:text).merge(user_id: current_user.id, post_id: params[:post_id])
  end
end

controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :authenticate_user!, only: [:new,:edit]
  before_action :back_index, only: :edit

  def index
    @posts = Post.all.order("created_at DESC")
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
    @post = Post.find(params[:id])
    @comment = Comment.new
    @comments = @post.comments.includes(:user)
  end

  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id])
    if @post.update(post_params)
      redirect_to post_path(@post.id)
    else
      render :edit
    end
  end

  def destroy 
    @post = Post.find(params[:id])
    @post.destroy
    redirect_to user_path(current_user.id)
  end
  
  private 

  def post_params
    params.require(:post).permit(:image,:caption,:category_id).merge(user_id: current_user.id)
  end

  def back_index
    @post = Post.find(params[:id])
    if current_user.id != @post.user_id
      redirect_to root_path
    end
  end

end

comment.js

function post (){
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {
    e.preventDefault();
    const form = document.getElementById("form");
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST"," /posts/post_id/comments",true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      const com = document.getElementById("comments")
      const item = XHR.response.commnt;
      const html = `
        <div class="comment>
          ${item.text}
        </div>`;
      com.insertAdjacentHTML("afterend", html);
    };
  });
};

window.addEventListener('load', post);

views/posts/show.html.erb

<%= render "shared/header" %>

<div class="posts">  
  <div class="post">
    <div class="top-post">
      <%= link_to "投稿者 #{@post.user.nickname}", user_path(@post.user.id), class:"user-name-post" %>
      <span><%= @post.created_at.to_s(:datetime_jp) %></span>
    </div>
    <div class="main-post">
      <div class="trash-edit">
        <% if user_signed_in? && current_user.id == @post.user_id %>
          <div class="trash">
            <%= link_to(post_path(@post.id), method: :delete, class:"fa fa-trash fa-4x trash-btn", style: "display: flex;" ) do%>
            <% end %>
          </div>
          <div class="edit">
            <%= link_to(edit_post_path(@post.id),class:"fa fa-edit fa-4x edit-btn",style: "display: flex;") do %>
            <% end %>
          </div>
        <% end %>
      </div>
      <%= link_to(post_path(@post.id),class: "image-link") do %>
        <%= image_tag @post.image, class: 'image-main-show' %> 
      <% end %>
    </div>
    <div class="footer-show">
      <%= link_to @post.user.nickname, user_path(@post.user.id), class:"user-name-post" %>
      <hr>
      <p class="caption"><%= @post.caption %></p>
      <hr>
      <p><%= "アイテムカテゴリー : #{@post.category.name}"%></p>
    </div>
  </div>

<div class="comments">
  <div class="comment">
    <% if user_signed_in? %>
      <%= form_with(model: [@post, @comment], local: true, class:"comment-form",id:"form") do |form| %>
        <%= form.text_area :text, placeholder: "コメントを追加...",class:"comment-area", row: "1" %>
        <%= form.submit "コメント",class:"comment-submit",id:"submit" %>
      <% end %>
    <% end %>
  </div>
</div>

<% @comments.each do |comment| %>
  <div class="comments-date" id="comments">
  </div>
<% end %>


<%= render "shared/footer" %>

試したこと

commentsコントローラーの保存処理に何か問題があるのかと思い確認しましたが問題があるように思えませんでした...
他にどこか問題があるのかそれともやっぱり保存の記述に問題があるのでしょうか？
どなたか分かる方いらっしゃればご教授願いたいです。

Answer 1

post_idがform中に入っていないのが原因のようで、こちらで試してみてください。

controllers/posts_controller.rb

def show
  @post = Post.find(params[:id])
  @comment = @post.comments.new # ここを変更して、post_idを入るようにする
  @comments = @post.comments.includes(:user)
end

views/posts/show.html.erb

<%= form_with(model: [@post, @comment], local: true, class:"comment-form",id:"form") do |form| %>
  <%# この一行追加 %>
  <%= form.hidden_field :post_id %>

  <%= form.text_area :text, placeholder: "コメントを追加...",class:"comment-area", row: "1" %>
  <%= form.submit "コメント",class:"comment-submit",id:"submit" %>
<% end %>