質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

1847閲覧

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

Rvato

総合スコア6

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/09/06 13:58

編集2020/09/08 10:36

前提・実現したいこと

ポケモンのデータを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
routes.rb

▼ pokemons_controller
pokemons_controller

▼ parties_controller
parties_controller

▼ pokemon.rb
pokemon.rb

▼ party.rb
party.rb

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

winterboum

2020/09/07 04:22

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

2020/09/08 09:19

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

回答1

0

ベストアンサー

みたところ、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

投稿2020/09/07 08:35

HiroshiUeki

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Rvato

2020/09/08 09:24 編集

> HTMLの仕様でformタグのネストが許可されていないため 情報ありがとうございます。 解決策を提示していただいたので、ローカル環境で修正してみようと思います。 取り急ぎ連絡でした。また報告いたします。
Rvato

2020/09/08 09:59

画像にて関連ファイルを追記させていただきました。 現在「同じ画面でパーティとポケモンを入力する」方法で行っております。 現状、未だsubmitボタンが反応しません…
Rvato

2020/09/08 10:47

続きのエラー問題は別枠で質問しようと思います。 解決策の提示、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問