Materializeを使ったviewのcheckboxやformについて Rails
Railsで投稿機能を持ったWebアプリケーションを作っています。
そこでUIのMaterializeを導入したのですが、導入前は問題なかったサブミットボタンや新しく入れたチェックボックスがどうしても機能せず困っています。
問題は2つあって新しく入れたチェックボックスの落とし込み方が分からないことと、チェックボックスのformタグがなぜかページ全体のformタグに反応してしまってサブミットボタンがformの外に出てしまって機能しなくなっていることです。
発生している問題・エラーメッセージ
これが導入前の問題なく動いていた投稿フォームです。
html
1<%= form_with(model: post, local: true) do |form| %> 2 <% if post.errors.any? %> 3 <div id="error_explanation"> 4 <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2> 5 6 <ul> 7 <% post.errors.full_messages.each do |message| %> 8 <li><%= message %></li> 9 <% end %> 10 </ul> 11 </div> 12 <% end %> 13 <div class="field"> 14 <%= form.label :title %> 15 <%= form.text_field :title %> 16 </div> 17 18 <div class="field"> 19 <%= form.label :content %> 20 <%= form.text_area :content %> 21 </div> 22 23 <%= form.file_field :image %> 24 25 <div class="check_box"> 26 <span>タグ</span> 27 <%= form.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %> 28 <div> 29 <%= tag.label do %> 30 <%= tag.check_box %> 31 <%= tag.text %> 32 <% end %> 33 </div> 34 <% end %> 35 </div> 36 37 <div class="actions"> 38 <%= form.submit %> 39 </div> 40<% end %>
html
1これがMaterialize導入後の投稿フォームです。 2 3<%= form_with(model: @post, local: true) do |form| %> 4 <% if post.errors.any? %> 5 <div id="error_explanation"> 6 <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2> 7 8 <ul> 9 <% post.errors.full_messages.each do |message| %> 10 <li><%= message %></li> 11 <% end %> 12 </ul> 13 </div> 14 <% end %> 15 16 <div class="field"> 17 <%= form.label :title %> 18 <%= form.text_field :title %> 19 <p>タイトルは15字以内です</p> 20 </div> 21 22 <div class="field"> 23 <%= form.label :content %> 24 <%= form.text_area :content %> 25 </div> 26 27 <%= form.file_field :image %> 28 29 <form action="#"> 30 <%= form.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %> 31 <p> 32 <label> 33 <input id="indeterminate-checkbox" type="checkbox" /> 34 <span>Indeterminate Style</span> 35 <%= tag.text %> 36 </label> 37 </p> 38 <% end %> 39 </form> 40 41 <div class="actions"> 42 <%= form.submit class: 'btn' %> 43 </div> 44<% end %>
試したこと
ネットで色々調べてみましたが、わかりませんでした。
ブラウザの検証を使って調べたところサブミットが機能しないのは、なぜか投稿フォーム外に出てしまっているからだというのはわかりました。
補足情報(FW/ツールのバージョンなど)
Materialize 1.0.0
Ruby 2.6.3
Rails6!
画像は導入後のフォームを検証で見たものです。
イメージ説明
追記:チェックボックスの方は単純にjavascriptの入れ忘れでした!サブミットの方は未だに動かないのでもしご存じの方はどうかよろしくお願いします!
あなたの回答
tips
プレビュー