JavaScript(jQuery)を使って商品の合計金額を自動計算してくれるフォームを作る

JavaScript(jQuery)を使って商品の合計金額を自動計算してくれるフォームを作る

個数を入力したらそれに応じた合計金額が出てくるみたいなやつです。
こういうのはJSでサクッとやるのが一番楽なんじゃないすかねー。

与えられた課題

  • 入力した個数に応じて合計金額を表示させたい
  • 合計金額の部分は直接入力させたくない

身近な例がないとイメージが湧きづらいと思うので今回はこんな設定でいきましょう。

単価300円のりんごを最大100個まで注文できるフォームを作ります。
お客さんが入力した個数に応じて合計金額が自動で表示されるようにしましょう。

ではやっていきます。

完成したイメージ

完成品のイメージはこちらです。

デモ

実際にやってみる

HTMLを書く

まずHTMLを書きます。

特筆すべきところはあまりないですが、
<input>要素についてるreadonly属性がキモですかね。
「ユーザー側で値を操作させたくない、しかしフォーム送信時に値は欲しい」
という場合に役立ちます。

disabled属性でも操作をさせないようにできますが、
そっちだと値が送れないので今回はreadonlyを使います。

CSSは好みで適宜やってくださいという感じですが、
操作できない感を出すために<input readonly>のカーソルはデフォルトにしておきます。

.sample_input[readonly] {
cursor: default;
background-color: #DDD;
}

JSを書く

  1. 最初の項目で入力された個数を取得する(数字以外の値は削除する)
  2. (最初の項目で0を入力した場合)未入力状態にする
    (最初の項目で100以上の数値を入力した場合)個数を100とする
  3. 個数*値段で計算し、計算した値を合計金額の項目に表示させる

こんな感じの考え方でいいと思います。
実際に書いてみましょう。

バニラなJavaScriptで書くならこうです。

おわりに

今回はシンプルな例でしたが、
(入力項目数を増やしたりちょっと複雑な計算式を書いたりすれば)
ガチャの期待値を自動計算してくれる機能とかも
基本的に同じような考え方で作れるようになります。
応用して色々作ってみるのも面白いでしょう。