小計と合計を自動的に計算するスクリプトです。(消費税を計算しないタイプ)
<html> <head> <title>HTML index Webサイト</title> <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>
<head> 〜 </head> 内にスクリプトを記述しておき、数量の変更時にスクリプトを実行します。
上記の例は、各商品の小計金額と合計金額を自動的に計算し、それぞれのテキストフィールドに金額を表示しています。
// 設定開始 〜 // 設定終了 の部分で、商品の設定を行ってください。
【商品の設定】
var price1 = document.form1.goods1.selectedIndex * 500;
document.form1.field1.value = price1;
form1 … formタグの name="" で指定した名前
goods1 … selectタグ(数量選択)の name="" で指定した名前
field1 … 小計を表示するテキストフィールドの name="" で指定した名前
500 … 商品の単価
それぞれフォームの内容に合わせて設定してください。
【合計の計算部分】
商品を追加した場合は、下記の部分も変更してください。
var total = price1 + price2 + price3;
↓price4 と price5 を追加する例
var total = price1 + price2 + price3 + price4 + price5;
セレクトボックスを操作したときに計算を開始するので、各商品の selectタグに onChange="keisan()" を指定しています。
青い文字の部分は、必要に応じて書き換えてください。
【カスタマイズ】
ボタンのクリックで計算を開始したい場合は、各selectタグの onChange="keisan()" を外した上で、次の1行を <form> 〜 </form> 内に記述します。
<input type="button" value="計算する" onClick="keisan()">