プログラミング学習267日目〜Laravel 自動車整備履歴アプリ作成 19日目〜

引き続き金額の自動計算。

やりたいことは、数量、単価をそれぞれのinputタグのテキストボックスに入力すると、数量✗単価の計算結果が金額のテキストボックスに入ること。

なにげに苦労したのが「テキストボックス」に計算結果を入れること。<p>なら入るけど、<input>にすると入らない。その理由になかなか気がつけませんでした。

まずは、覚え書きとして必要部分のみコードを。

    <form method="POST" action="/maintenance/store" onSubmit="return checkSubmit()" name="form1">
       @csrf
       <div class="container">
           <div>
               <h3>数量</h3>
               <h3>単価</h3>
               <h3>金額</h3>
           </div>
               <p><input type="number" id="qty" name="qty" value="{{ old('qty') }}" onchange="func1()" style="text-align: right"></p>
               <p><input type="number" id="unit_price" name="unit_price" value="{{ old('unit_price') }}" onchange="func1()" style="text-align: right"></p>
               <p><input type="text" name="sub_total" value="{{ old('sub_total') }}" style="text-align: right" readonly></p>
       </div>

       <button type="submit" href=""  class="btn btn-secondary">登録する</button>
   </form>
</div>

<script>
   'use strict';

   function func1() {
       //数量
       let qty = document.getElementById('qty').value;
       //単価
       let unit_price = document.getElementById('unit_price').value;
       //合計金額＝数量＊単価
       let total = qty * unit_price;
       document.form1.sub_total.value = '¥' + Math.round(total).toLocaleString() + '-';
   }
</script>

<input>の値として自動入力させるには、JavaScriptで
document.フォーム名.input名.value = 変数
としてやる必要があるようです。なので<form>にもnameを付ける必要があります。

document.getElementById('id名').value = 変数
では<input>の場合うまくいきません。<> </>の間に入れるようなものならこれでもうまくいくようです。<p> </p>ならgetElementByIdでもうまくいきました。

というわけで、数量、単価の入力値を取得して
（これらもdocument.getElementByIdでなくdocument.フォーム名.input名にしたほうが統一感があって見栄えはよさそうです）
 //数量
let qty = document.getElementById('qty').value;
//単価
let unit_price = document.getElementById('unit_price').value;

それらを計算する
//合計金額＝数量＊単価
let total = qty * unit_price;

そして計算結果を代入。
document.form1.sub_total.value = '¥' + Math.round(total).toLocaleString() + '-';
Math.roundは四捨五入、toLocaleString()は3桁区切り。結構便利です。

久々のJavaScriptでいろいろ苦労はありましたが、無事に実装完了です。