購入小計を即時計算するための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の場合は正規表現を使った処理が必要になります。
[js]
<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>
[/js]
HTMLの記述は以下のように。単にで囲った部分に表示するだけです。
[html]
<span id="ans"></span>
[/html]
今回は価格が決まっているので、購入数部分だけをフォームとしましたが、価格部分をフォームに改造すれば、計算機風にもなると思います。
[tgAmazonItemLookup asin="4048684116" related="1"]