html側で入力したカンマ区切りありの金額入力値をjQueryで自動計算させたい

Question

製作物内容

WEB上で請求書を作成できるサービスを
JavaフレームワークSpringで作っています。
そこでリアルタイムで入力した数量と単価を自動でカンマ区切りしたのち、小計の計算をしたいです。

ローカルで起動した際の入力部は以下のような感じです。

数量×単価　を入力後、　単価合計が自動で表示されるようにしたいです。

実現したい事

• 入力時は、自動で３桁ごとにカンマ区切りを入れたい(数量、単価、単価合計、小計)
• 数量と単価を入力後、単価合計が自動計算されで表示される
• 画像は項番1だが項番4まであるので、それぞれの単価合計も同じように計算したい
• 単価合計が4つあるが、単価合計が表示されるごとに小計を自動で出したい

すべての単価合計を出力しなくても小計はリアルタイムで計算されていく仕組みを作りたいです。

ソースは以下です。
テーブルが複数あり、上記の表が４つほどありますので、
それぞれidから値を取得し自動計算を行いたいです。
bootstrapは使用していますがjqueryは触れたこともないので、
どのようにすべきか例をいただけますと幸いです。

<tbody>
					<tr align="center">
						<td class="bg-lightgreen font-weight-bold">項番1</td>
						<td colspan="6"><textarea id="" name="" class="form-control"
								placeholder="（例）Java○○システム開発" tabindex="1" maxlength="60"
								th:field="*{koumoku}" rows="3" cols="70"></textarea></td>
					</tr>
					<tr align="center">
						<td class="bg-lightgreen font-weight-bold">項番1</td>
						<td>数量</td>
						<td colspan="2">
							<input type="tel" class="form-control quantity1" th:field="*{suryo}" placeholder="1" tabindex="1" name="" id="suryo">
						</td>
						<td>単位</td>
						<td colspan="2"><select class="form-control"
							th:field="*{tani}">
								<option value=""></option>
								<option th:each="taniKubun : *{taniList}"
									th:value="${taniKubun.key}"
									th:selected="${taniKubun.key} ==*{tani}"
									th:text="${taniKubun.value}"></option>
						</select></td>
					</tr>
					<tr align="center">
						<td class="bg-lightgreen font-weight-bold">項番1</td>
						<td>単価</td>
						<td colspan="2">
							<input type="tel" class="form-control price1" th:field="*{tanka}" maxlength="10" placeholder="1" tabindex="1" name="" id="tanka" style="text-align: right;">
						<td>単価合計</td>
						<td colspan="2"><input type="tel" style="text-align: right;"
							class="form-control" th:field="*{tankaGokei}" maxlength="10"
							placeholder="1,800,000" tabindex="1" name="" id="tankaGokei"></td>
					</tr>
				</tbody>

Comments

[m.ts10806]

>どのようにすべきか
例も何も、分からないなりに自分で書いてみるところからでは。
初期に自分で１字も書かないなら今後自分では書かなくなると思います。
Webフレームワークに手を出すくらいにプログラミングしているなら、
JavaScriptが全く書けないというのもおかしい話です。

[ymr.2525]

半日かかりましたが何とか解決できました。
書き出しからjsの文法がわからずkindleで書籍購入後学びました。

m.tsさんありがとうございます。
努力した甲斐があります。

それとですが、プログラミングは「書く、書けない」で区別してしまうのは
違うと思います。何を持って書けるのか、書けないのかは定義によって変わってくると思います。

[m.ts10806]

「わからないなりにとりあえずやってみるところから」というのは質問する前にやってみることとしてはヘルプにも書いてあります。
https://teratail.com/help/question-tips#questionTips1-2
何もできないならまだそこに手を出す段階ではないと言えます。

あと「プロとしての」をお求めでしたら対価が発生します。
それで食っていっているのがプロなので。
teratailで回答することで報酬が発生するわけではないので、
「とりあえず思うようにやってみたけど、ちょっとここが分からない。7割くらいできてるけどあと3割のヒントが欲しい」という使い方になると思います。
書いてみたとしても拾い集めただけで全然理解してないコードで質問するもの丸投げに当たります。回答者が何言ってるかある程度理解できるくらいには地力が必要です。

[ymr.2525]

なるほど。今回の質問内容を確認すると私は丸投げそのものですね。
やってみたけど出来なかったからソースを確認してください。のような質問が常に必要であると再確認しました。プラスで、回答を求めるにはそれなりの基礎力が身についていないといけないというものですね。

今回は回答を得られるようなものではなかったでしたが、改めてプログラミングと向き合えました。

ありがとうございます。

フォローさせていただきました。

Answer 1

ちょっと乱暴な書き方で冗長なコードになってしまいましたが解決できました。

jQuery(function($) {

			$(document).on('keyup', '#tanka', function(e) {
				var suryo = $('#suryo').val();
				var tanka = $('#tanka').val();
				//parseIntで文字列を数値に
				suryo = parseInt(suryo);
				tanka = parseInt(tanka);
				if (suryo == "" || tanka == "") {
					$('tankaGokei').val("");
					return false;
				}

				//計算結果を出力
				var gokei = comma(suryo * tanka);
				var gokeiComma = $('#tankaGokei').val(gokei);
			});
			$(document).on('keyup', '#tanka1', function(e) {
				var suryo1 = $('#suryo1').val();
				var tanka1 = $('#tanka1').val();
				//parseIntで文字列を数値に
				suryo1 = parseInt(suryo1);
				tanka1 = parseInt(tanka1);
				if (suryo1 == "" || tanka1 == "") {
					$('tankaGokei1').val("");
					return false;
				}

				//計算結果を出力
				var gokei1 = comma(suryo1 * tanka1);
				var gokeiComma1 = $('#tankaGokei1').val(gokei1);

			});
			$(document).on('keyup', '#tanka2', function(e) {
				var suryo2 = $('#suryo2').val();
				var tanka2 = $('#tanka2').val();
				//parseIntで文字列を数値に
				suryo2 = parseInt(suryo2);
				tanka2 = parseInt(tanka2);
				if (suryo2 == "" || tanka2 == "") {
					$('tankaGokei2').val("");
					return false;
				}

				//計算結果を出力
				var gokei2 = comma(suryo2 * tanka2);
				var gokeiComma2 = $('#tankaGokei2').val(gokei2);

			});
			$(document).on('keyup', '#tanka3', function(e) {
				var suryo3 = $('#suryo3').val();
				var tanka3 = $('#tanka3').val();
				//parseIntで文字列を数値に
				suryo3 = parseInt(suryo3);
				tanka3 = parseInt(tanka3);
				if (suryo3 == "" || tanka3 == "") {
					$('tankaGokei3').val("");
					return false;
				}

				//計算結果を出力
				var gokei3 = comma(suryo3 * tanka3);
				var gokeiComma3 = $('#tankaGokei3').val(gokei3);
			});

			// 自動計算
			$(".keisan").click(
					function() {
						var tankaGokei = $('#tankaGokei').val();
						var noCtankaGokei = noComma(tankaGokei);

						var tankaGokei1 = $('#tankaGokei1').val();
						var noCtankaGokei1 = noComma(tankaGokei1);

						var tankaGokei2 = $('#tankaGokei2').val();
						var noCtankaGokei2 = noComma(tankaGokei2);

						var tankaGokei3 = $('#tankaGokei3').val();
						var noCtankaGokei3 = noComma(tankaGokei3);

						if (isNaN(noCtankaGokei)) {
							noCtankaGokei = 0;
						}
						if (isNaN(noCtankaGokei1)) {
							noCtankaGokei1 = 0;
						}
						if (isNaN(noCtankaGokei2)) {
							noCtankaGokei2 = 0;
						}
						if (isNaN(noCtankaGokei3)) {
							noCtankaGokei3 = 0;
						}

						// 小計を保持
						var shokei = noCtankaGokei + noCtankaGokei1
								+ noCtankaGokei2 + noCtankaGokei3;

						//固定 やりかたわからん
						var shohizei = 0.1;

						// 消費税額
						var shohizeiGaku = Math.round(shokei * shohizei);

						// 税込合計
						var gokei = Math.round(shokei + shohizeiGaku);

						// カンマをつける
						var shohizeiGaku1 = comma(shohizeiGaku);
						$('#shohizeiGaku').text(shohizeiGaku1);

						var shokei1 = comma(shokei);
						$('#zeinukiGokei').val(shokei1);

						var gokei1 = comma(gokei);
						$('#zeikomiGokei').val(gokei1);
					});

        /*
        *
        * 以下メソッド
        *
        */
			//カンマを外す
			function noComma(num) {
				var removed = num.replace(/,/g, '');
				return parseInt(removed, 10);
			}

			//カンマをつける
			function comma(num) {
				return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
			}

			//税抜価格計算
			function getExcludingTax(val){
				//消費税率
				const RATE = 0.1;  //10%

				//数値判定
				if(val == null || val.trim() === "" || isNaN(val)){
					return null;
				}

				//消費税計算（四捨五入）　※切捨てにしたい場合は、Math.floorに変更してください。
				return Math.round(val / (1 + RATE));
			}
});