Railsで入力画面→確認画面→送信完了までの実装
こんにちは!kossyです!
さて、今回は、Railsで入力画面→確認画面→送信完了までの実装方法を
ブログに残したいと思います。
写真のような画面を作りたいとして、
項目が多いため、確認画面への遷移を行いたいとする。
post先はconfirmを指定します。
form.html.haml = form_for :proposal, url: confirm_proposals_path do |f| 省略 routes.rb resources :proposals, only: [:new] do collection do post :confirm end end $ rails routes confirm_proposals POST /proposals/confirm(.:format) proposals#confirm new_proposal GET /proposals/new(.:format) proposals#new
投稿画面に入力された値のバリデーションは、
確認画面に遷移する前に確認します。
proposals_controller.rb class ProposalsController < ApplicationController before_action :proposal_params, only: [:confirm] def new @proposal = Proposal.new end def confirm return if @proposal.valid? render :new end private def proposal_params @proposal = Proposal.new(params.require(:proposal).permit(:name, :email, :phone_number, :perfecture, 以下省略)) end end
確認画面サンプル
入力画面へ戻るボタンを押したら、値を保持したまま
戻りたいので、hidden_fieldで渡します。
入力された値に間違いがなければ、そのままDBへ保存したいので、
これもhidden_fieldで渡します。
以下サンプルコード
confirm.html.haml = form_for :proposal, url: new_proposals_path do |f| = f.hidden_field :name = f.hidden_field :email = f.hidden_field :phone_number 省略 = f.submit '入力画面へ戻る' = form_for :proposal, url: proposals_path do |f| = f.hidden_field :name = f.hidden_field :email = f.hidden_field :phone_number 省略 = f.submit '登録する'
戻るボタンが押された時のルーティングとアクションを定義します。
proposals_controller.rb class ProposalsController < ApplicationController before_action :proposal_params, only: [:confirm, :back] 省略 def back render :new end 省略 end routes.rb resources :proposals, only: [:new] do collection do post :new, path: :new, as: :new, action: :back post :confirm end end
pathとasを指定しているのは、createとpathメソッド名が重複し動作しなくなるため指定しています。
最後にcreateアクションを追加します。
proposals_controller.rb class ProposalsController < ApplicationController before_action :proposal_params, only: [:confirm, :back, :create] 省略 def create if @proposal.save redirect_to root_path flash[:notice] = "申し込みが完了しました。2営業日以内にご連絡を致します。" else render :new end end 省略 end routes.rb resources :proposals, only: [:new, :create] do collection do post :new, path: :new, as: :new, action: :back post :confirm end end
これで入力画面→確認画面→送信完了の動きを実現できると思います。
以下サンプルコードを掲載します
form.html.haml = form_for :proposal, url: confirm_proposals_path do |f| %ul - @proposal.errors.full_messages.each do |message| %li= message .form-group = f.label '氏名' = f.text_field :name, class: 'form-control', placeholder: '氏名を入力してください' .form-group = f.label 'メールアドレス' = f.text_field :email, class: 'form-control', placeholder: 'メールアドレスを入力してください' .form-group = f.label '電話番号' = f.text_field :phone_number, class: 'form-control', placeholder: '例: 090-1234-5678' 省略 = f.submit '入力確認画面へ', class: "btn btn-primary" confirm.html.haml %h1.pt-5.mt-5 入力事項確認画面 %table.table.table-striped.pt-5.mt-5 %tr %th 氏名: %td= "#{@proposal.name}" %th メールアドレス: %td= "#{@proposal.email}" %tr %th 電話番号 %td= "#{@proposal.phone_number}" 省略 = form_for :proposal, url: new_proposals_path do |f| = f.hidden_field :name = f.hidden_field :email = f.hidden_field :phone_number 省略 = f.submit '入力画面へ戻る' = form_for :proposal, url: proposals_path do |f| = f.hidden_field :name = f.hidden_field :email = f.hidden_field :phone_number 省略 = f.submit '登録する' routes.rb resources :proposals, only: [:new, :create] do collection do post :new, path: :new, as: :new, action: :back post :confirm end end $ rails routes new_proposals POST /proposals/new(.:format) proposals#back confirm_proposals POST /proposals/confirm(.:format) proposals#confirm proposals POST /proposals(.:format) proposals#create new_proposal GET /proposals/new(.:format) proposals#new proposals_controller.rb class ProposalsController < ApplicationController before_action :proposal_params, only: [:confirm, :back, :create] def new @proposal = Proposal.new end def confirm return if @proposal.valid? render :new end def back render :new end def create if @proposal.save redirect_to root_path flash[:notice] = "申し込みが完了しました。2営業日以内にご連絡を致します。" else render :new end end private def proposal_params @proposal = Proposal.new(params.require(:proposal).permit(:name, :email, :phone_number 省略)) end end