javascriptの第一歩
今までrailsで写経したjsは使ったことあるのですが、昨日初めて自分で0からjs書いたので備忘録。
今回はviewに直書きしました イメージはフォームに西暦を入れて異なるフォームに移った時に現在の西暦からフォームに書いた西暦の引き算イベントが発生するものです。 例えば、text_fieldに2011と入力してフォームから離れると2016 - 2011が実行され5がviewに表示されるというものです。
hoge.html.slim = form_for @company_setting, :url => { action: :update }, :method => :put do |f| h3.title.is-bold = t('.financial_period') br = f.text_field :closing_first_year, id: 'first_year' #ここがイベント着火元 span#calclation # このidに結果が表示される javascript: // 決算1期目の年を入力して 他のフォームに移動すると今期が何期目なのか自動計算される $('#first_year').change(function() { var now = new Date(); var year = now.getFullYear(); var first_year = $('#first_year').val(); if ($.isNumeric($('#first_year').val())) { $('#calclation').text(year - first_year); } else { $('#calclation').text('取得できません'); #半角数字以外の値を受け取った場合はelseを実行 } });
未入力状態
半角の数字を入力した時
半角数字以外
ちなみに
var first_year = document.getElementById('first_year').value;
と
var first_year = $('#first_year').val();
は同じ意味とのこと!後者の方が簡潔に書けるので良い!
これだけ!!
なお今回はviewファイルで直にjsを書いたが、 例えばapp/assets/javascripts/hoge.jsを作ってそこに書いていくと viewに
= javascript_include_tag "hoge"
って書けばhoge.jsが使われるので、汎用的なものは個別にjsファイルとして作って書いていった方がいいとのこと。