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

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

与えられた課題

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

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

ではやっていきます。

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

まずHTMLを書きます。

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

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

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

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

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

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。