*いしのなかにいる*

oops ! I am in rock !

【Rails】入力内容の変更有無を検知しよう

こんにちは。

先日、Railsのアプリを作っていて、項目に入力があった(もしくは変更があった)ことを検知して 変更があった場合だけ更新ボタンを押せるようにしたくなりました。

ググってみてもちょうどいい情報が見つからなかったので、こんな感じで対処してみました。

やりたいこと

更新系の画面なんかで、画面内容に変更ありの場合だけ更新ボタンを押せるようにしたい、とかいうケース。 入力部品の値変更時にテキストやチェックボックスの変更有無を検知する必要がある。

解決案

本当ならdirtyチェック的な判定方法を持つべきだと思うけど、 特定の項目にだけ判定を追加したいので 今回は view にhiddenフィールドを用意して、javascriptで値の比較を行いました。

~~~ 省略 ~~~

<%# テキストフィールドの場合 %>
<%= text_field_tag :hoge_input, @hash.hoge, id: "hoge-input" %>
<%= hidden_field_tag :hoge_hidden, @hash.hoge, id: "hoge-hidden" %>

<button id="btn" disabled >更新する</button>
~~~ 省略 ~~~
$(document).on 'change', '#hoge-input', ->

  if $('#hoge-input').val() == $('hoge-hidden').val() 
        # 変更がない場合はボタンを押せないように
    $('#btn').prop('disabled', 'disabled')
  else
        # 変更ありの場合にボタン押下に変更
    $('#btn').removeAttr('disabled')

最後に

とりあえずでこんな感じに対応しました。

項目がたくさんになると手に負えなくなるので、なんか別の方法を考えてみようと思います。 よりスマートな方法があったら教えてください!