form_withで入力された内容を表示したい。

前提・実現したいこと

プログラミング初学者ですので、初歩的な質問をしてしまうかもしれませんがご容赦ください。
Ruby on Railsで入力された内容を別のHTLMフォームで表示しようとしている最中に問題が起きました。

知りたいこと

なぜ、actionと異なる動作を起こしてしまうのか？
解決方法の糸口など何かアドバイスいただけませんでしょうか？

発生している問題・エラーメッセージ

new.html.erbで入力された内容をsearch.html.erbに表示したいのですが、内容を入力しsubmitボタンをクリックしても
URIに変化が起きるだけで画面が遷移しません。

GoogleChromeで検証した際のソースコードが下記になります。

<form action="/yourtuber/searches" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="s8PmOKJNU8Ldt4a3OQUS7bVcoyTr5TjUx/8NbT0Zw9j21IgnkufepJh0kKZRICOMSGPIfoyoS237aWmW4bQnSg==" />
            <label class="h4 float-left mb-3" for="search_video_id">タグを検索する</label>
            <input class="form-control form-control-lg" placeholder="動画IDを入力してください" type="text" name="search[video_id]" id="search_video_id" />
            <input type="submit" name="commit" value="確定して次へ" class="btn btn-primary my-3" data-disable-with="確定して次へ" />
</form>

actionが"/yourtuber/searches"となっているのですが、実際にsubmitボタンをクリックすると
http://localhost/yourtuber/new?utf8=%E2%9C%93&authenticity_token=xpd07sdSxkllFXp7h6VmYfi7gZ5BKDpsX%2FTne8i8MpC5kFAdCFiR7mwnWjqkGYHu7GgeV6OTdifM%2BcQiuh%2BlMQ%3D%3D&search%5Bvideo_id%5D=DpmdcmVKi9c&commit=%E7%A2%BA%E5%AE%9A%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8
このように、一例ではありますが、URIに変化が起こるだけで画面遷移が起こりません。

該当のソースコード

new.html.erb

<%= form_with(model: [:yourtuber, @search], local: true) do |form| %>
  <%= form.label :video_id, 'タグを検索する', class: 'h4 float-left mb-3' %>
  <%= form.text_field :video_id, class: 'form-control form-control-lg', placeholder: '動画IDを入力してください' %>
  <%= form.submit '確定して次へ', class: 'btn btn-primary my-3' %>
<% end %>

search.html.erb

@find_video_list

search.rb

class Search
  include ActiveModel::Model

  attr_accessor :video_id
  validates :video_id, presence: true
end

routes.rb

Rails.application.routes.draw do
  get '/', to: 'yourtuber#index'
  get '/yourtuber/searches', to: 'yourtuber#search'
  resources :yourtuber, only: [:index, :new]
end

yourtuber_controller.rb

class YourtuberController < ApplicationController
  include ApplicationHelper

  def index
  end

  def new
    @search = Search.new
  end

  def search
    input_video_id = params[:video_id]
    search = Search.new(video_id: input_video_id)
    @find_videos_list = find_videos_list(search.video_id)
  end
end

試したこと

url: '/hoge' method: :getのオプションを用いた記法で書いていたりしていましたが、問題解決には至りませんでした。
様々調べてはいたのですが、
画面遷移が起こらない原因は非同期処理が起こっているという内容が多く、
local: trueで非同期処理を起こらないようにすることで解決するという内容しか確認できませんでした。

補足情報（FW/ツールのバージョンなど）

Ruby 2.5.8
Ruby on Rails 5.2.4.3

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

回答1件

ベストアンサー

form_withにmodelを渡した際にはpostでformタグが作成されます。
今回用意しているroutes.rbにはgetしか用意していないためルーティングがうまくいかないかと思います。

<%= form_with(model: [:yourtuber, @search], local: true) do |form| %>

<form action="/yourtuber/searches" accept-charset="UTF-8" method="post">

1. postではなくgetを使う

postはデータを作成する際に使うべきメソッドであり、今回は検索なのでデータは作成しません。なのでgetを使うべきなのでgetに変更しましょう！

2. local: trueオプションを付ける

また、画面遷移を含むためlocal: trueは必要です。（正確には画面遷移=local: trueではないですが、非同期処理を理解するまでは毎回付けておいて良いです。）

3. フォームモデルをやめてみる

検索結果が複雑になるとフォームモデルを使って処理を分離すべきですが、今回のようなシンプルな場合はモデルを使わずに作ってみると良いと思います。

4. yourtuber#newは検索フォームの画面として使うべきではない

railsのレールに則ってやるなら、yourtuber#newではYourtuberを作るページになるべきです。
検索画面として使うならyourtuber#searchが適切です。

上記の内容を、下記の記事を参考に実装してみると良いと思います。
https://www.d-wood.com/blog/2017/09/28_9285.html

備考: フォームモデルを使う時

form_forで作られており、すこし古いですが参考になるかと思います。

https://rails.densan-labs.net/form/search_form.html

投稿2020/09/08 03:35

necocoa

総合スコア209

TKAilf

2020/09/08 17:01

回答ありがとうございます。 necocoa様の form_withにmodelを渡した際にはpostでformタグが作成されます。という一文がとても参考になりました！この部分だけで1週間以上立ち往生していたので本当に助かりました。また、他にも様々なアドバイスをいただけたことに感謝をさせていただきベストアンサーとさせていただきます！