この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

なんか消費税が上がってフォームとかも変える必要が出てきたのでついでにメモっておきます。
フォーム送信のしくみは以前の記事のものを使います。


まずはHTMLでフォームの見た目を作ります。

<form action="./postmail.cgi" method="post" name="form1">
<table>
<tr><th>商品1 : 500円</th>
<td>数量<select name="goods1" onchange="calculation()">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select><input size="8" type="text" name="field1" value="0" />円</td>
</tr>
<tr><th>商品2 : 1000円</th>
<td>数量<select name="goods2" onchange="calculation()">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select><input size="8" type="text" name="field1" value="0" />円</td>
</tr>
<tr>
<th>消費税</th>
<td>
<input size="8" type="text" name="field_tax" value="0">円
</td>
</tr>
<tr>
<th>合計</th>
<td>
<input type="text" name="field_total" size="8" value="0">円
</td>
</tr>
</table>

次に実際に計算させるコードをJavaScriptで書きます。消費税は8パーセントで計算しています。

function calculation(){
var price1 = document.form1.goods1.selectedIndex * 500;
document.form1.field1.value = price1;
var price2 = document.form1.goods2.selectedIndex * 1000;
document.form1.field2.value = price2;
var total_price = price1 + price2;
var tax = 8;
var total_tax = Math.round((total_price * tax) / 100);
document.form1.field_tax.value = total_tax;
var total = total_price + total_tax ;
document.form1.field_total.value = total;
}