私が入力フォームを作っていた時、form_forを使ってViewからユーザーが入力した値を取得してテーブルを更新する処理を組み込む場合に、取得した値の内容を変更・加工してテーブルに加えたい場合がありました。
今回はこのような場合に加工した値に変更してテーブルを更新する方法を紹介します。
加工したい時ってどういう時？
例えば、テーブルのあるカラムにあらかじめ決まった初期値を入れたい場合とか。
この場合、カラムの情報はf.hidden_fieldに割り当てて初期値をvalueに設定すれば出来そうです。
が、hiddenに値を直接入力しておくのはセキュリティ上あまりよろしくありません。
（簡単に値を書き変えられてしまうから）
そのため、f.hidden_fieldに初期値を入れるタイミングはsubmitボタンを押された直後になります。
加工する方法
加工、初期値セットには２つ方法があります。
１．JavaScriptで値を加工する
一番無難な方法ですが、JavaScriptから加工する方法です。
値を入れるタイミングがsubmitボタンを押した直後にする必要があるので、少し工夫が必要です。
まず、submitボタンにf.submitを使っている場合、ボタンを押した瞬間にruby側で登録処理が走ってしまいます。
なので、ここではf.submitの代わりにf.buttonを使います。
f.buttonも同じく普通に記述してしまうとf.submitと同じく登録処理が走ってしまうので「type: ‘button’」を指定して回避します。
|
1 2 3 |
<%= form_for(@hogetable, url:{controller:'hoge', action:'create'}) do |f|%> <%= f.button "登録", type: 'button' %> <% end %> |
「type: ‘button’」を指定することで、buttonからsubmit機能が失われ、ボタンを押しても何も処理が行われない状態になります。
これでView側の準備はOKです。
次に、JavaScriptで処理を記述していきます。
JavaScriptで行う事は2つです。
1. 値を加工or初期値を代入するする
2. formの情報をsubmitしてruby側に渡す
普通のJavaScriptだけでも記述できますが、jQueryが使える環境ならjQueryで記述が楽です。
(これくらいの処理だとそんな変わらないか・・・）
■jQuery
|
1 2 3 4 5 6 7 8 |
$(function () { $('#hoge-submit-btn').click(function () { // 値を加工してセット $(hoge-text).value($(hoge-text).value() + "あいうえお") // サブミット(送信)する []の中はサブミットしたいformのid $('#hoge_form1').submit(); }); }); |
■JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
function hogesubmit () { // 値を加工する var textdata = document.getElementById("hoge-text"); textdata.value = textdata.value + "あいうえお" // サブミット(送信)する []の中はサブミットしたいformのname document.forms['hoge_form'].submit(); // ボタン「hoge-submit-btn」にこのメソッドをonClickで指定する } |
これで値を加工した上でruby側に値を受け渡すことが出来ます。
値の加工だけでなく、同じ要領で入力情報の妥当性チェックとかもできます。
２．Rubyで値を加工する
session変数などの値を入れたい場合とか、Ruby側で値を加工したい場合の方法です。
Rubyの場合、submit情報を取得してからテーブルの更新処理までの間に加工することになるで、View側はf.submitのままでもOK。
値を加工するにはcontollerに次のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class HogeController < ApplicationController def create # (例)hogeテーブルのnameカラムを加工する params.require(:hoge)[:name] = params.require(:hoge)[:name] + "あいうえお" Hoge.create(hoge_params) end private def hoge_params # パーミッション設定 params.require(:hoge).permit(:name, :age) end end |
Viewのformから渡ってきたパラメータから加工したいカラム名を指定して加工を行います。
加工等が終わったら、テーブルのcreate処理を行います。
まとめ
JavaScriptとRubyの2パターンの方法を書きましたが、JavaScriptでの加工も簡単ではないにせよ加工が出来てしまうのでやっぱりセキュリティー上あまりよろしくないんじゃないかと思います。
（私はよくやりがちですが・・・）
極力Ruby側でデータの加工するように心がけたいですね
