[jQuery]フォームないの自動計算

Ruby側のフォームサンプル

<%= form_with(model: @user) %>
  <%= f.text_field :sample1, id: "sample1" %>
  <%= f.text_field :sample2, id: "sample2" %>

  <%= f.text_field :result, id: "result" %>
<%end%>

スクリプト側イベント定義

入力したのち変化させたいフォームないid="sample"の数値を入力し終わった時に変化する
changeイベントを使用

$('#sample2').change(function() {

変数に代入

変数に.val()メソッドで代入する
のちにそれをInteger型に変更する

var s = $(#sample1).val();
var a = $(#sample2).val();
var si = parseInt(s);
var sa = parseInt(a);

計算

先ほど代入したものの変数をそのまま引き算する

var result = si - sa

計算結果をフォームに反映

計算結果の変数resultを.val()内に代入する

$('#result').val(result)

全体コード

<%= form_with(model: @user) %>
  <%= f.text_field :sample1, id: "sample1" %>
  <%= f.text_field :sample2, id: "sample2" %>

  <%= f.text_field :result, id: "result" %>
<%end%>

<script>
$('#sample2').change(function() {
  var s = $(#sample1).val();
  var a = $(#sample2).val();
  var si = parseInt(s);
  var sa = parseInt(a);

  var result = si - sa

  $('#result').val(result)
});
</script>

これでsample2のフォームに数値を入れ終わったあとに、resultフォームに計算した数値がリアルタイムで自動入力される。

jQuery による入力後の自動計算(Rails/form_with)