配列をうまく使えないので、同じような処理を繰り返しており課題はあるものの
なんとかラジオボタンで選択した金額を計算できる自動見積りフォームを作ってみた。
合計：0 円
消費税：0 円
税込合計：0 円
見積り
下記項目を選択すると自動計算します。
ソース
<div onscroll="display_account()">
<script type="text/javascript">
<!--
function keisan(){
var tax = 5; // 消費税率
var i;
var p1 = 0;
var p2 = 0;
var p3 = 0;
var goods1 = document.getElementsByName("goods1"); //チェック済みのラジオボタンを調べて値を取得
for(i=0; i<goods1.length; i++){
if(goods1[i].checked){
p1 = goods1[i].value;
break;
}
}
var goods2 = document.getElementsByName("goods2"); //チェック済みのラジオボタンを調べて値を取得
for(i=0; i<goods2.length; i++){
if(goods2[i].checked){
p2 = goods2[i].value;
break;
}
}
var goods3 = document.getElementsByName("goods3"); //チェック済みのラジオボタンを調べて値を取得
for(i=0; i<goods3.length; i++){
if(goods3[i].checked){
p3 = goods3[i].value;
break;
}
}
var price1 = p1 * document.form1.volume1 .selectedIndex; // 数量×単価
var price2 = p2 * document.form1.volume2 .selectedIndex; // 数量×単価
var price3 = p3 * document.form1.volume3 .selectedIndex; // 数量×単価
var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 税抜き合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算
var total2 = total1 + tax2; //税込み合計を計算
//表示用の金額を3桁区切りに変換
var data = new Array(total1,tax2,total2); //金額を配列に格納
var len = data.length; //配列の数を取得
for(cnt=0;cnt<len;cnt++){
data[cnt] = new String(data[cnt]).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); //ここで正規表現で3桁ごとにカンマで区切る
}
//フォームのテキストエリアに表示する金額
document.form1.field_total1.value = data[0]; // 税抜き合計
document.form1.field_tax.value = data[1]; // 消費税
document.form1.field_total2.value = data[2]; // 税込合計
//右の窓に表示する金額
document.getElementById("display_account_amount").innerHTML = data[0]; // 税抜き合計
document.getElementById("display_account_tax").innerHTML = data[1]; // 消費税
document.getElementById("display_account_all").innerHTML = data[2]; // 税込合計
}
// -->
</script>
<script type="text/javascript">
<!--
function display_account() {
var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){
document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {
var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");
if(isIE && document.compatMode=="BackCompat"){
document.body.onscroll = display_account;
}else{
document.documentElement.onscroll = display_account;
}
}
//-->
</script>
<div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br />
合計：<span id="display_account_amount">0</span> 円<br />
消費税：<span id="display_account_tax">0</span> 円<br />
税込合計：<span id="display_account_all">0</span> 円<br />
</div>
<h1>見積り</h1>
<p>下記項目を選択すると自動計算します。</p>
<form name="form1" action="" id="form1" method="post">
<table>
<tr>
<td>商品</td>
<td>グレード5</td>
<td>グレード4</td>
<td>グレード3</td>
<td>グレード2</td>
<td>グレード1</td>
<td>数量</td>
</tr>
<tr>
<td>液晶テレビ</td>
<td><input type="radio" name="goods1" id="goods1" value="120000" onClick="keisan()" />
120,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="40000" onClick="keisan()" />
40,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="20000" onClick="keisan()" />
20,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="15000" onClick="keisan()" />
15,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="10000" onClick="keisan()" />
10,000円</td>
<td><select name="volume1" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>エアコン</td>
<td><input type="radio" name="goods2" id="goods2" value="80000" onClick="keisan()" />
80,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="60000" onClick="keisan()" />
60,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="40000" onClick="keisan()" />
40,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="20000" onClick="keisan()" />
20,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="10000" onClick="keisan()" />
10,000円</td>
<td><select name="volume2" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>パソコン</td>
<td><input type="radio" name="goods3" id="goods3" value="60000" onClick="keisan()" />
60,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="40000" onClick="keisan()" />
40,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="20000" onClick="keisan()" />
20,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="10000" onClick="keisan()" />
10,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="50000" onClick="keisan()" />
5,000円</td>
<td><select name="volume3" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0">
円</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</div>