複数のinputからデータを取得して、別々のカラムに格納する

Question

前提・実現したいこと

AJAXで非同期通信を実装したいのですが、
入力フォームが複数あるためか、うまくコードを書くことができていません。

該当のソースコード

//new.html.haml
= form_with(model: [@group, @panel], html: { class: 'js-form' }, local: true) do |form|
   .SettingFolderForm__input
     .leftField
       = form.label
       = form.text_area :question
     .centerField
       = form.label
       = form.text_area :answer
     .rightField
       = form.submit

def create
 @panel = @group.panels.new(panel_params)
 if @panel.save
  respond_to do |~format|
   format.json
  end
end

def pane_params
 params.require(:panel).permit(:question, :answer).merge(user_id: current_user.id)
end

確認したいこと、試したこと

１.データ取得のためにはどう考えたら良いか？
２.複数データを取り扱うための、ajaxのdataの記述に関して

１： 複数の入力フォームがあることから、今のところ.mapを使ってデータを取得するようなコードを書いていますが、mapを使うと多重でない配列データになり、別々のカラムに保存するajaxのdataの記述をどうしたら良いかが検討つかなくなります。

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    let panel = $('.SettingFolderForm__input').map(function (index, el) {
      return $(this).val();
    });
    console.log(panel);
    $.ajax({
      url: '/groups/:group_id/panels/new.json',
      type: 'POST',
      data: {
        panel: { //ここからもう書けなくなる
          question:, answer: panel
        }
      },
      dataType: 'json',
    })
  })
});

viewファイルのインプット部位にクラス名をそれぞれ設定して、jsも別々に記述してデータをそれぞれのカラムに入れてやるように書きかえるとなると下記のようになるかなと考えましたが、これだとPOST NOT FOUND

$(function() {
  $('.js-form').on('submit', function(e) {
    e.preventDefault();
    let panel = "";
    let panel1 = $('.leftInput').val();
    let panel2 = $('.rightInput').val();
    $.ajax({
      url: '/groups/:group_id/panels/new.json',
      type: 'POST',
      data: {
        panel: {
          question: panel1,
          answer: panel2
        }
      },
      dataType: 'json',
    })
  })
});

panelを定義する際に、ハッシュキーの入った配列になっている必要があると思うのですが、

Comments

[coco_bauer]

なぜ、複数のフォームが必要なのですか？
それらを１つのフォームに統合する（もしくは、用途(機能)ごとのページ(URL)を分ける）ことは出来ないのですか？
どのような画面をつくろうとしているかがわからないのでHTMLのソースを追加して頂けませんか？

[Malson]

viewファイルは、該当のソースコードの一番上になります。hamlで記述しています。
form_withで、2つのinputをまとめて取得するというようなやり方です。

Answer 1

url部分は多分間違えてると思いますが、一応提示されているものを利用して書きます。
jsでAjaxの送信処理を書かなくともRailsのフォームにはAjaxで送信する機能があるので、
それを利用すればいいのではないでしょうか。

= form_with(model: [@group, @panel], url: '/groups/:group_id/panels/new.json', html: { class: 'js-form' }) do |form|
   .SettingFolderForm__input
     .leftField
       = form.label
       = form.text_area :question
     .centerField
       = form.label
       = form.text_area :answer
     .rightField
       = form.submit

Answer 2

formdataで処理するのがよいと思いますが、質問のソース記載が中途半端なので
どれをどうとまでは指摘できません
そもそもjsonデータに値をなげて意味があるかは状況がわかりません

Comments

[Malson]

非同期通信で連続でデータを保存するためにJSON APIを実装したかったのです。
formDataが良くわかっておらず、調べてなんとなくできそうだから、ちゃんとできるまで時間がかかりましたが、かなり勉強になりました。
ありがとうございました。