Uncaught TypeErrorで非同期通信ができません。

Question

前提・実現したいこと

railsでグループが作成でき、その中で以下2つのことができるアプリを開発しています。
①グループメンバー同士のチャット
②グループごとに場所（store）を登録でき、そのstoreについてメンバーがコメントをすることができる。

発生している問題・エラーメッセージ

グループ内のチャットにはmessageというテーブルを作成し、投稿されたデータを非同期通信で実装したところ下記エラーが表示されてしましました。

 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
    at HTMLDivElement.<anonymous> (message.self-a4cf30b48cb2db425cbccb8b1375c02bc6d692ea7a6450f6f8d193dde52efd9a.js?body=1:56)
    at HTMLDivElement.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLDivElement.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)
(anonymous) @ message.self-a4cf30b48cb2db425cbccb8b1375c02bc6d692ea7a6450f6f8d193dde52efd9a.js?body=1:56
dispatch @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227
elemData.handle @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879

該当のソースコード

#message.js

$(function(){

  function buildHTML(message){
    if ( message.image ) {
      let html =
        `<div class="show-lists__chat-main__message-lists__contents">
            <div class="show-lists__chat-main__message-lists__contents__content">

              <div class="show-lists__chat-main__message-lists__contents__content__left">
                <div class="show-lists__chat-main__message-lists__contents__content__left__name">
                  ${message.user_name}
                </div>
                <div class="show-lists__chat-main__message-lists__contents__content__left__text">
                  ${message.content}
                  <img class=".show-lists__chat-main__message-lists__contents__content__left__text__img" src="${message.image}">
                </div>
              </div>

              <div class="show-lists__chat-main__message-lists__contents__content__right">
                <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
                  ${message.created_at}
                </div>
              </div>

            </div>
          </div>`
      return html;
    } else {
      let html =
      `<div class="show-lists__chat-main__message-lists__contents">
        <div class="show-lists__chat-main__message-lists__contents__content">

          <div class="show-lists__chat-main__message-lists__contents__content__left">
            <div class="show-lists__chat-main__message-lists__contents__content__left__name">
              ${message.user_name}
            </div>
            <div class="show-lists__chat-main__message-lists__contents__content__left__text">
              ${message.content}
            </div>
          </div>

          <div class="show-lists__chat-main__message-lists__contents__content__right">
            <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
              ${message.created_at}
            </div>
          </div>

        </div>
      </div>`
      return html;
    };
  }

  $('.show-lists__chat-main__message-form').on('submit', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    let url = $(this).attr('action');

    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    
    .done(function(data){
      let html = buildHTML(data);
      $('.show-lists__chat-main__message-lists').append(html);      
      $('form')[0].reset();
      $('.show-lists__chat-main__message-lists').animate({ scrollTop: $('.show-lists__chat-main__message-lists')[0].scrollHeight});
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
    })
    .fail(function() {
      alert("メッセージ送信に失敗しました");
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
    });
  });
});

.show-lists__chat-main__message-form
      = form_with model: [@group, @message], html: {class: ".show-lists__chat-main__message-form"}, local: true do |f|
        .show-lists__chat-main__message-form__contents
          .show-lists__chat-main__message-form__contents__input-space
            = f.text_field :content, class: '.show-lists__chat-main__message-form__contents__input-space', placeholder: 'type a message'
            .show-lists__chat-main__message-form__contents__input-space__label
              = f.label :image, class: '.show-lists__chat-main__message-form__contents__input-space__label' do
                =icon('far', 'image')
                .show-lists__chat-main__message-form__contents__input-space__label__hidden
                  = f.file_field :image, class: '.show-lists__chat-main__message-form__contents__input-space__label__hidden'
          .show-lists__chat-main__message-form__contents__btn-box
            = f.submit 'Send', class: '.show-lists__chat-main__message-form__contents__input-space__btn-box__Send'

class MessagesController < ApplicationController
  before_action :set_group

  def index
    @message = Message.new
    @messages = @group.messages.includes(:user).order("created_at DESC")
  end

  def create
    @message = @group.messages.new(message_params)
    if @message.save
      respond_to do |format|
        format.json
      end
    else
      @messages = @group.messages.includes(:user)
      flash.now[:alert] = 'メッセージを入力してください。'
      render :index
    end
  end


  private

  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end

  def set_group
    @group = Group.find(params[:group_id])
  end
end

試したこと

ターミナルで確認したところメッセージがas htmlになっていました。$ajaxの中でjsonを指定しているのにも関わらずこうなってしまっているところにも原因があるのでしょうか？
当方初学者のため、google等で検索しましたが、中々回答にたどり着けなく、質問させていただきます。

補足情報（FW/ツールのバージョンなど）

MySQL 5.6.47
sequel Pro
Rails 6.0.3.2

Comments

[m.ts10806]

内容これではタグ足りないのでは。
Ruby前提ならその関係のタグも必要ですし、あとHTMLは必要ですね。

[tomoZQ]

ありがとうございます。タグ増やします。

[tomoZQ]

申し訳ありません、「HTMLは必要」の意味を履き違えてました、ソースコード追加致しましたのでよろしくお願い致します。

Answer 1

hamlの構造を

.chat-main
  .chat-main__message-form
    = form_with model: [@group, @message], html: {class: "chat-main__message-form__Form"}, local: true do |f|
      .chat-main__message-form__Form__contents
        = f.text_field :content, class: 'chat-main__message-form__Form__contents__message', placeholder: 'type a message'
        .chat-main__message-form__Form__contents__imgbox
          = f.label :image, class: 'chat-main__message-form__Form__contents__imgbox__label' do
            = icon('far', 'image', class: 'chat-main__message-form__Form__contents__imgbox__label__icon')
            = f.file_field :image, class: 'chat-main__message-form__Form__contents__imgbox__label__file-field'
      = f.submit 'Send', class: 'chat-main__message-form__Form__btn-send'

と変更することで解消。