質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Q&A

解決済

1回答

1777閲覧

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

ymr.2525

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

0グッド

0クリップ

投稿2021/05/24 14:12

製作物内容

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

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

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

実現したい事

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/24 14:24

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

2021/05/29 09:21 編集

半日かかりましたが何とか解決できました。 書き出しからjsの文法がわからずkindleで書籍購入後学びました。 m.tsさんありがとうございます。 努力した甲斐があります。 それとですが、プログラミングは「書く、書けない」で区別してしまうのは 違うと思います。何を持って書けるのか、書けないのかは定義によって変わってくると思います。
m.ts10806

2021/05/29 09:22

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

2021/05/29 15:49

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

回答1

0

自己解決

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

js

1 2jQuery(function($) { 3 4 $(document).on('keyup', '#tanka', function(e) { 5 var suryo = $('#suryo').val(); 6 var tanka = $('#tanka').val(); 7 //parseIntで文字列を数値に 8 suryo = parseInt(suryo); 9 tanka = parseInt(tanka); 10 if (suryo == "" || tanka == "") { 11 $('tankaGokei').val(""); 12 return false; 13 } 14 15 //計算結果を出力 16 var gokei = comma(suryo * tanka); 17 var gokeiComma = $('#tankaGokei').val(gokei); 18 }); 19 $(document).on('keyup', '#tanka1', function(e) { 20 var suryo1 = $('#suryo1').val(); 21 var tanka1 = $('#tanka1').val(); 22 //parseIntで文字列を数値に 23 suryo1 = parseInt(suryo1); 24 tanka1 = parseInt(tanka1); 25 if (suryo1 == "" || tanka1 == "") { 26 $('tankaGokei1').val(""); 27 return false; 28 } 29 30 //計算結果を出力 31 var gokei1 = comma(suryo1 * tanka1); 32 var gokeiComma1 = $('#tankaGokei1').val(gokei1); 33 34 }); 35 $(document).on('keyup', '#tanka2', function(e) { 36 var suryo2 = $('#suryo2').val(); 37 var tanka2 = $('#tanka2').val(); 38 //parseIntで文字列を数値に 39 suryo2 = parseInt(suryo2); 40 tanka2 = parseInt(tanka2); 41 if (suryo2 == "" || tanka2 == "") { 42 $('tankaGokei2').val(""); 43 return false; 44 } 45 46 //計算結果を出力 47 var gokei2 = comma(suryo2 * tanka2); 48 var gokeiComma2 = $('#tankaGokei2').val(gokei2); 49 50 }); 51 $(document).on('keyup', '#tanka3', function(e) { 52 var suryo3 = $('#suryo3').val(); 53 var tanka3 = $('#tanka3').val(); 54 //parseIntで文字列を数値に 55 suryo3 = parseInt(suryo3); 56 tanka3 = parseInt(tanka3); 57 if (suryo3 == "" || tanka3 == "") { 58 $('tankaGokei3').val(""); 59 return false; 60 } 61 62 //計算結果を出力 63 var gokei3 = comma(suryo3 * tanka3); 64 var gokeiComma3 = $('#tankaGokei3').val(gokei3); 65 }); 66 67 // 自動計算 68 $(".keisan").click( 69 function() { 70 var tankaGokei = $('#tankaGokei').val(); 71 var noCtankaGokei = noComma(tankaGokei); 72 73 var tankaGokei1 = $('#tankaGokei1').val(); 74 var noCtankaGokei1 = noComma(tankaGokei1); 75 76 var tankaGokei2 = $('#tankaGokei2').val(); 77 var noCtankaGokei2 = noComma(tankaGokei2); 78 79 var tankaGokei3 = $('#tankaGokei3').val(); 80 var noCtankaGokei3 = noComma(tankaGokei3); 81 82 if (isNaN(noCtankaGokei)) { 83 noCtankaGokei = 0; 84 } 85 if (isNaN(noCtankaGokei1)) { 86 noCtankaGokei1 = 0; 87 } 88 if (isNaN(noCtankaGokei2)) { 89 noCtankaGokei2 = 0; 90 } 91 if (isNaN(noCtankaGokei3)) { 92 noCtankaGokei3 = 0; 93 } 94 95 // 小計を保持 96 var shokei = noCtankaGokei + noCtankaGokei1 97 + noCtankaGokei2 + noCtankaGokei3; 98 99 //固定 やりかたわからん 100 var shohizei = 0.1; 101 102 // 消費税額 103 var shohizeiGaku = Math.round(shokei * shohizei); 104 105 // 税込合計 106 var gokei = Math.round(shokei + shohizeiGaku); 107 108 // カンマをつける 109 var shohizeiGaku1 = comma(shohizeiGaku); 110 $('#shohizeiGaku').text(shohizeiGaku1); 111 112 var shokei1 = comma(shokei); 113 $('#zeinukiGokei').val(shokei1); 114 115 var gokei1 = comma(gokei); 116 $('#zeikomiGokei').val(gokei1); 117 }); 118 119 /* 120 * 121 * 以下メソッド 122 * 123 */ 124 //カンマを外す 125 function noComma(num) { 126 var removed = num.replace(/,/g, ''); 127 return parseInt(removed, 10); 128 } 129 130 //カンマをつける 131 function comma(num) { 132 return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); 133 } 134 135 //税抜価格計算 136 function getExcludingTax(val){ 137 //消費税率 138 const RATE = 0.1; //10% 139 140 //数値判定 141 if(val == null || val.trim() === "" || isNaN(val)){ 142 return null; 143 } 144 145 //消費税計算(四捨五入) ※切捨てにしたい場合は、Math.floorに変更してください。 146 return Math.round(val / (1 + RATE)); 147 } 148});

投稿2021/05/29 09:09

ymr.2525

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問