【Rails】form_withのsubmitボタンが反応しない

前提・実現したいこと

ポケモンのデータを1〜6匹入力し、パーティとして登録するアプリを作成中です。
データを入力しsubmitボタンを押下しようとするとボタンが反応しないです。この現象を解決したいです。

▼ 開発環境
Rails 5.2.4.3
Mac OS

該当のソースコード

▼ index.html.haml

haml
1.wrapper-party
2  = render "shared/header"
3  = render "shared/side-bar"
4  = render "party"

▼ _party.html.haml

haml
1= form_with model: @party, local: true, class: "party-register" do |f|
2  .party
3    .party__wrap
4
5      .party__wrap__top
6
7        -# ------------------------ 1匹目 ------------------------ #-
8        .party__wrap__top__pokemon1
9          .pokemon-container
10            = icon 'fas', 'angle-double-down', class: "angle-double-down-icon"
11            1st
12            .pokemon-container__top
13              -# ---- ポケモン ---- #-
14              .pokemon-container__top__name
15                .label-name
16                  ポケモン
17                .form-name
18                  = f.text_field :name, class: "form-name__input", maxlength: "6", type: "text", autocomplete: "off"
19              -# ---- ニックネーム ---- #-
20              .pokemon-container__top__nickname
21                .label-nickname
22                  ニックネーム
23                .form-nickname
24                  = f.text_field :nickname, class: "form-nickname__input", maxlength: "12", type: "text", autocomplete: "off"
25              -# ---- 性別 ---- #-
26              .pokemon-container__top__gender
27                .label-gender
28                  性別
29                .form-gender
30                  %select{ name: "exp_gender", type: "text", class: "form-gender__input", id: "exp_gender" }
31                    %option{ value: "" }  ----
32                    %option{ value: "1" } ♂
33                    %option{ value: "2" } ♀
34                    %option{ value: "3" } 不明
35
36------------ 中略 ------------
37
38  .party-name
39    パーティ名
40    = f.text_field :party_name, class: "party-name__input", maxlength: "6", type: "text", autocomplete: "off"
41
42  .register-btn
43    .register-btn__text
44      = f.submit "登録する", class: "register-btn__text__submit"

補足情報

▼ 参考記事/質問
https://teratail.com/questions/194194

▼ 仮説と検証作業の結果
renderされている_party.html.hamlの1行目の= form_withの記述を消すと以下のエラーが出てしまいます。

index.html.hamlと_party.html.hamlに= form_withを記述するとページは表示されますが、submitボタンが反応しない状態です。
何か気づきがありましたらご意見頂戴したいです。

追記 [2020.9.8]

文字数制限を超えてしまうので画像とさせてください。追記依頼があれば承ります。

▼ routes.rb

▼ pokemons_controller

▼ parties_controller

▼ pokemon.rb

▼ party.rb

winterboum

2020/09/07 04:22

どこにsubmitがあるのでしょう

Rvato

2020/09/08 09:19

index.html.hamlファイルの最下部に記述しております。

行動規範の内容に同意します

回答1件

ベストアンサー

みたところ、index.html.hamlでformが定義されていて、その中でrender partyしているので、_party.html.hamlのformが入れ子になっているのではないでしょうか？

renderされている_party.html.hamlの1行目の= form_withの記述を消すと以下のエラーが出てしまいます。

form_withがなくなると、partyでつかうべきfが消えてしまうのでエラーとなり、

index.html.hamlと_party.html.hamlに= form_withを記述するとページは表示されますが、submitボタンが反応しない

のは、HTMLの仕様でformタグのネストが許可されていないためで、正しく動作しないとおもわれます。

解決のアイデアとしては、「パーティーの作成」と「ポケモンの入力」を分ける方法があります（どうしても同じ画面でパーティとポケモンを入力する場合、nested_attributes_for ActiveRecord::NestedAttributes::ClassMethodsなどを使う必要がありますね）

以下は「パーティ」「メンバー」を分けて考えた時の例です（動作未確認です!!）

ruby
1# ルーティング
2resources :parties do
3  resources :members
4end
5
6# URLヘルパーと対応するView
7new_party_path => /parties/new.html.haml
8new_party_member_path(@party) => /parties/members/new.html.haml
9
10# パーティをCRUDするコントローラ
11PartiesController
12
13# パーティのメンバーをCRUDするコントローラ
14Parties::MembersController