CakePHP３：フォームでの自動計算の実装方法について

Question

前提

現在Cakephp3系にてフォーム機能の実装をしております。
フォーム内に、項目の自動計算部分を設けたいのですが、記述方法がわからずで困っております。

やりたい事

履歴A　＋　履歴B　＋　履歴C　＝　合計
手動入力＋手動入力＋手動入力＝自動計算

現在は全て手打ちで、データベースへポストしているのですが、合計部分を自動入力に変えて
同様にポストできるように変更できればと思っております。

現在記述ずみの該当のソースコード

<h2>購入履歴</h2>
<table>
  <tbody>
    <tr>
      <th class="form_ttl">履歴A</th>
      <td class="required_none">
        <div class="input_wrap">
          <?= $this->Form->text('priceA',['label' => false], ['required' => true]); ?>
        </div>
      </td>
      <th class="form_ttl">履歴B</th>
      <td class="required_none">
        <div class="input_wrap">
          <?= $this->Form->text('priceB',['label' => false], ['required' => true]); ?>
        </div>
      </td>
      <th class="form_ttl">履歴C</th>
      <td class="required_none">
        <div class="input_wrap">
          <?= $this->Form->text('priceC', ['label' => false], ['required' => true]); ?>
        </div>
      </td>
      <th class="form_ttl">合計</th>
      <td class="required_none">
        <div class="input_wrap">
      <?= $this->Form->text('total', ['label' => false], ['required' => true]); ?>
        </div>
      </td>
    </tr>
  </tbody>
</table>

試したこと

検索するとjQueryでの実現方法などは出るのですが、自由記述ではなくプルダウンでの実装等でした。
どういった形で機能を実現するのが良いかアドバイス含めご教授いただければと思い、初めて投稿させて頂きました。
何卒宜しくお願い致します。

Answer 1

合計を変化させねばならないのは、履歴A,B,Cのどれかの内容が変化したときです。
従って jQuery で、対象の input の内容が変化したとき（change イベントが発火したとき）に演算をすればよいのです。

$("input[name^=price]").on("change", function() {
  var priceA = $("input[name=priceA]").val() * 1;
  var priceB = $("input[name=priceB]").val() * 1;
  var priceC = $("input[name=priceC]").val() * 1;
  $("input[name=total]").val(priceA + priceB + priceC);
});

Comments

[michael_]

ご回答ありがとうございます。
現在教えて頂きました記述を元に手がかりが掴めそうです。

### スクリプト部分
<?= $this->Html->scriptStart(['block' => true]) ?>
$(".kawaru").on("change", function() {
var priceA = $("input[name=price_test1]").val() * 1;
var priceB = $("input[name=test_name2]").val() * 1;
var priceC = $("input[name=other_test3]").val() * 1;
$("input[name=total]").val(priceA + priceB + priceC);
});
<?= $this->Html->scriptEnd() ?>

### コード部分
<h2>購入履歴</h2>
<table>
<tbody>
<tr>
<th class="form_ttl">履歴A</th>
<td class="required_none">
<div class="input_wrap">
<?= $this->Form->text('price_test1',['label' => false, 'class' => 'kawaru'], ['required' => true]); ?>
</div>
</td>
<th class="form_ttl">履歴B</th>
<td class="required_none">
<div class="input_wrap">
<?= $this->Form->text('test_name2',['label' => false, 'class' => 'kawaru'], ['required' => true]); ?>
</div>
</td>
<th class="form_ttl">履歴C</th>
<td class="required_none">
<div class="input_wrap">
<?= $this->Form->text('other_test3', ['label' => false, 'class' => 'kawaru'], ['required' => true]); ?>
</div>
</td>
<th class="form_ttl">合計</th>
<td class="required_none">
<div class="input_wrap">
<?= $this->Form->text('total', ['label' => false], ['required' => true]); ?>
</div>
</td>
</tr>
</tbody>
</table>

現在このように変更して記述をしてみております。
ただ、ブラウザのコンソールログで直接記載すると、動くのですが,
実際にコードとして記述して確認をすると動作しません。

初歩的な jQueryの読み込みなどは確認したのですが、他に原因がわからず。
もしこちらも分かりましたらご教授いただければ幸いです。

[tacsheaven]

イベントハンドラを登録するスクリプトが、HTMLレンダリングの終わる前、すなわち対象のエレメントがないときに動いてしまっているのでしょう。
$.when($.ready).then(function() {...}) を使って、HTML レンダリング終了後にイベントハンドラ登録スクリプトが動くようにしましょう。

[michael_]

ご返答ありがとうございます。
無事に解決いたしました。最終的に、
ーーーーーーーーーーーーーーー
###　スクリプト部分
ーーーーーーーーーーーーーーー
<?= $this->Html->scriptStart(['block' => true]) ?>
$( function() {
$(".●●●●").on("change", function() {
var priceA = $("input[name=◇◇◇]").val() * 1;
var priceB = $("input[name=◆◆◆]").val() * 1;
var priceC = $("input[name=■■■]").val() * 1;
$("input[name=□□□]").val(priceA + priceB + priceC);
});
} );
<?= $this->Html->scriptEnd() ?>

この形の記述で無事に動作させることができました。
$( function() {
} );
これで囲っていなくて動いておりませんでした。
tacsheaven様、誠にありがとうございました。