form_forでpostリクエストを送れない時の対処法

はじめに

Railsで日記投稿機能を実装していた。
タイトルと本文をフォームに入力し、投稿ボタンを押すと画面が遷移しなかった。
デベロッパーツールのnetworkで通信を確認すると、通信自体がされていなかった。

日記投稿画面でページを再度読み込むとフォームを再入力する必要はあるが、postリクエストを送ることができた。

開発環境

・MacBook Pro
プロセッサ2 GHz クアッドコアIntel Core i5
メモリ16GB
・Virtualbox+vagrant+CentOs7.9
・RubyOnRails5.2

解決方法

form_forをまたぐようにdivタグが設定されていたため、divタグをform_forの中に収めたら、不備が解消した。

作業

form_forをまたぐようにdivタグが設定されていた。

 <div class="diary_textarea">
  　　<%= form_for(@diary) do |f| %>
   　　<%= render 'shared/error_messages', object: f.object %>
       <div class="field_diary text-center">
         　　 <%= f.text_area :title, placeholder: "タイトルを入力してください",class:'diary_title'%>
         　　 <%= f.text_area :content, placeholder: "本文を入力してください",class:'diary_content'%>
        </div> 
          <div class="diary_category">
       　　   <%= f.label :category_id %>
       　　   <%= f.collection_select :category_id, Category.all, :id, :name,:include_blank => "カテゴリ-を選択してください"%>
          </div>
         <div class="picture text-center">
          　　<%= f.file_field :diary_image,class:'diary_form' %>
       　　　　</div>
　　　</div> 
   <div class="btn_diary">
     <%= f.select :status, Diary.statuses.map { |k, v| [t("diary.status.#{k}"), k] }, selected: @diary.status %>
     <%= f.submit "投稿する", class: "btn_base_update text-center" %>
    <% end %>                      

このように直すと不備が解消した。

<%= form_for(@diary) do |f| %>
　　<div class="diary_textarea">
 　　<%= render 'shared/error_messages', object: f.object %>
  　　<div class="field_diary text-center">
   　　　　　<%= f.text_area :title, placeholder: "タイトルを入力してください",class:'diary_title'%>
  　　 　　　<%= f.text_area :content, placeholder: "本文を入力してください",class:'diary_content'%>
    </div> 
    <div class="diary_category">
    　　　　<%= f.label :category_id %>
    　　 <%= f.collection_select :category_id, Category.all, :id, :name,:include_blank => "カテゴリ-を選択してください"%>
    </div>
    <div class="picture text-center">
    　　　　　<%= f.file_field :diary_image,class:'diary_form' %>
    　　　　　<%= f.hidden_field :diary_image_cache %>
    </div>
</div>                             

原因

form_forをまたぐようにdivタグが設定されているとturbolinksうまく動ないようです。

ご覧いただきありがとうございました。