購入小計を即時計算するためのJavascript
2012/06/24
EC系サイトでよくある、購入数フォームに数値を入力し、その小計を即時計算するJavascriptを書いたので、晒してみます。
IDが「PaymentBuyCount」としたフォームに購入数を入力すると、、IDを「ans」とした箇所へ合計が表示されるという仕様です。
5行目の『"<?= $price ?>"』は、PHPで設定している変数を、JSに読ませています。
7行目からは、フォーム内容が入っていない場合に「NaN」(Not a Number)が出るのを防ぐ処理。
15行目からは、書いてある通り、3桁でカンマを入れる処理です。PHPなら「number_format」で可能ですが、JSの場合は正規表現を使った処理が必要になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> <!-- function calkPrice() { var num0 = document.getElementById('PaymentBuyCount').value; var num1 = "<?= $price ?>"; if ( isNaN(num0) || num0 == '' ){ var num0 = 0; } var ans = parseInt(num0) * parseInt(num1); document.getElementById('ans').innerHTML = addFigure(ans); } // 3桁でカンマを入れる function addFigure(str){ var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } //--> </script> |
HTMLの記述は以下のように。単にで囲った部分に表示するだけです。
|
1 |
<span id="ans"></span> |
今回は価格が決まっているので、購入数部分だけをフォームとしましたが、価格部分をフォームに改造すれば、計算機風にもなると思います。
[tgAmazonItemLookup asin="4048684116" related="1"]