読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Railsで1フォームに複数のサブミット(Submit)ボタンを配置するTips

Rails Tips Rails View

Railsで、次のように1つのフォームに複数のSubmitボタンを追加したときの処理のハンドリングについて説明します。

f:id:nipe880324:20141206180539p:plain:w420

# app/views/articles/_form.html.erb
<%= form_for(@article) do |f| %>
  ...

  <%= submit_tag "投稿" %>
  <%= submit_tag "プレビュー", name: "preview_button" %>
<% end %>

動作確認

  • Rails 4.1

目次

  1. Submit時のパラメーターを確認
  2. Submitボタンにname属性を設定
  3. コントローラーで処理を振り分ける
  4. ビューに表示内容を設定
  5. 動作確認


1. Submit時のパラメーターを確認

まず、「投稿」ボタン、「プレビュー」ボタンを押した時のparamsの内容を確認してみましょう。

# 投稿ボタンをした時のパラメーター
Parameters:
{
  "utf8"=>"", "authenticity_token"=>"5Du...",
  "article" => {
    "title"   => "",
    "content" => ""
  },
  "commit" => "投稿"
}

# プレビューボタンを押した時のパラメーター
Parameters:
{
  "utf8"=>"", "authenticity_token"=>"5Du...",
  "article" => {
    "title"   => "",
    "content" => ""
  },
  "commit" => "プレビュー"
}


両者を見比べるcommmitの内容が違うことに気づくと思います。
基本的にはコントローラー側でcommitの値を確認し、条件分岐をすればよいです。




2. Submitボタンにname属性を設定

上記のままでもよいのですが、ボタン名は変わる可能性があるので往々にしてあるので、次のようにname属性を設定します。

<%= submit_tag "投稿" %>
<%= submit_tag "プレビュー", name: "preview_button" %>


「プレビュー」ボタンを押したときのパラメーターは次のように変わります。
(「投稿」ボタンを押したときのパラメーターは上記と変わりません)

# プレビューボタンを押した時のパラメーター
Parameters:
{
  "utf8"=>"", "authenticity_token"=>"5Du...",
  "article" => {
    "title"   => "",
    "content" => ""
  },
  "preview_button"=>"プレビュー"
}


3. コントローラーで処理を振り分ける

先ほど追加したpreview_buttonキーの存在有無により、処理を振り分けます。
プレビュー機能なので、もう一度作成画面を表示するようにします。

# app/controllers/articles_controller.rb

# POST /articles
# POST /articles.json
def create
  @article = Article.new(article_params)

  # params[:preview_button]キーが存在する場合か、ariticleがDBに保存できない場合
  # new画面を再度表示する
  if params[:preview_button] || !@article.save
    render :new
  else
    redirect_to @article, notice: 'Article was successfully created.'
  end
end


4. ビューに表示内容を設定

_form.html.erbpreview_buttonキーが存在するときの画面表示を記載します。
ここではプレビュー機能なので、show.html.erbの表示内容と同じ内容を表示するようにしました。

# app/views/articles/_form.html.erb
...
<% if params[:preview_button] %>
  <div class="preview">
    <!-- show.html.erbと重複しているので部分テンプレートにするべき -->
    <div class="title">
      <%= @article.title %>
    </div>

    <div class="content">
      <%= simple_format @article.content %>
    </div>
  </div>
<% end %>
...


5. 動作確認

では、サーバーを起動し、画面を確認してみます。
新規画面でタイトルと内容を記載し、「プレビュー」ボタンを押すと、登録画面が再表示され、preview_buttonパラメーターが存在するためプレビューが表示されます。
f:id:nipe880324:20141206180631p:plain:w420


「登録」ボタンを押すと、DBに保存されて、詳細画面に遷移します。
f:id:nipe880324:20141206180641p:plain:w420



以上です。