JavaScriptのサンプル

タイプごとに価格を設定し、その合計を自動的に計算するスクリプトです。（消費税を計算するタイプ）

消費税を計算しないタイプはこちらへ

商品名 タイプ
商品サンプル1
商品サンプル2
商品サンプル3
合計 円
消費税 円
税込合計 円

コード

<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

function keisan(){

	// 設定開始

	var tax = 10; // 消費税率

	// 商品1
	var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value;

	// 商品2
	var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value;

	// 商品3
	var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value;

	// 合計を計算
	var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3);

	// 設定終了


	document.form1.field_total1.value = total1; // 合計を表示

	var tax2 = Math.round((total1 * tax) / 100);
	document.form1.field_tax.value = tax2; // 消費税を表示

	document.form1.field_total2.value = total1 + tax2; // 税込合計を表示

}

// --> 
</script> 

</head>
<body>

<form action="#" name="form1">

<table>
<tr>
<th>商品名</th>
<th>タイプ</th>
</tr>
<tr>
<td>商品サンプル1</td>
<td><select name="goods1" onChange="keisan()">
<option value="0">タイプを選択してください</option>
<option value="500">タイプ1（500円）</option>
<option value="1000">タイプ2（1,000円）</option>
<option value="1500">タイプ3（1,500円）</option>
</select></td>
</tr>
<tr>
<td>商品サンプル2</td>
<td><select name="goods2" onChange="keisan()">
<option value="0">タイプを選択してください</option>
<option value="500">タイプ1（500円）</option>
<option value="1000">タイプ2（1,000円）</option>
<option value="1500">タイプ3（1,500円）</option>
</select></td>
</tr>
<tr>
<td>商品サンプル3</td>
<td><select name="goods3" onChange="keisan()">
<option value="0">タイプを選択してください</option>
<option value="500">タイプ1（500円）</option>
<option value="1000">タイプ2（1,000円）</option>
<option value="1500">タイプ3（1,500円）</option>
</select></td>
</tr>
<tr>
<td align="right">合計</td>
<td><input type="text" name="field_total1" size="8" value="0"> 円</td>
</tr>
<tr>
<td align="right">消費税</td>
<td><input type="text" name="field_tax" size="8" value="0"> 円</td>
</tr>
<tr>
<td align="right"><strong>税込合計</strong></td>
<td><input type="text" name="field_total2" size="8" value="0"> 円</td>
</tr>
</table>

</form>

</body>
</html>

解説

<head> ～ </head> 内にスクリプトを記述しておき、商品タイプの変更時にスクリプトを実行します。

上記の例は、合計金額、消費税額、税込合計金額などを自動的に計算し、それぞれのテキストフィールドに金額を表示しています。

// 設定開始 ～ // 設定終了 の部分で、商品の設定を行ってください。

商品の設定

var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value;
  • form1 … formタグの name="" で指定した名前
  • goods1 … selectタグ（タイプ選択）の name="" で指定した名前

それぞれフォームの内容に合わせて設定してください。

  • 商品価格の設定は、optionタグの value="" で行います。例えば1,000円を設定する場合は次のように記述します。
<option value="1000">

合計の計算部分

商品を追加した場合は、下記の部分も変更してください。

var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3);

↓ price4 と price5 を追加する例

var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3) + parseInt(price4) + parseInt(price5);

消費税について

消費税率は10%に設定されています。

var tax = 10

消費税額は小数点以下を四捨五入しています。

セレクトボックスを操作したときに計算を開始するので、各商品の selectタグに onChange="keisan()" を指定しています。

青い文字の部分は、必要に応じて書き換えてください。

カスタマイズ

ボタンのクリックで計算を開始したい場合は、各selectタグの onChange="keisan()" を外した上で、次の1行を <form> ～ </form> 内に記述します。

<input type="button" value="計算する" onClick="keisan()">