タイプごとに価格を設定し、その合計を自動的に計算するスクリプトです。(消費税を計算しないタイプ)
<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.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 total = parseInt(price1) + parseInt(price2) + parseInt(price3); // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </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"><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.options[document.form1.goods1.selectedIndex].value;
form1 … formタグの name="" で指定した名前
goods1 … selectタグ(タイプ選択)の name="" で指定した名前
それぞれフォームの内容に合わせて設定してください。
※商品価格の設定は、optionタグの value="" で行います。例えば1,000円を設定する場合は次のように記述します。
<option value="1000">
【合計の計算部分】
商品を追加した場合は、下記の部分も変更してください。
var total = parseInt(price1) + parseInt(price2) + parseInt(price3);
↓price4 と price5 を追加する例
var total = parseInt(price1) + parseInt(price2) + parseInt(price3) + parseInt(price4) + parseInt(price5);
セレクトボックスを操作したときに計算を開始するので、各商品の selectタグに onChange="keisan()" を指定しています。
青い文字の部分は、必要に応じて書き換えてください。
【カスタマイズ】
ボタンのクリックで計算を開始したい場合は、各selectタグの onChange="keisan()" を外した上で、次の1行を <form> 〜 </form> 内に記述します。
<input type="button" value="計算する" onClick="keisan()">