課題はたくさんあるものの、いろいろサンプルを探してJavaScriptの自動見積りフォームを作ってみた。

ソース

<div onscroll="display_account()">
<script type="text/javascript">
<!--
function keisan(){
// 計算開始
var tax = 5; // 消費税率


var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価

var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;

var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;

var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算
// フォームのテキストエリアに表示する金額

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

document.form1.field_tax.value = tax2; // 消費税を表示

document.form1.field_total2.value = total1 + tax2; // 税込合計を表示
//右の窓に表示する金額

document.getElementById("display_account_amount").innerHTML = total1;

document.getElementById("display_account_tax").innerHTML = tax2;

document.getElementById("display_account_all").innerHTML = total1 + tax2;
}
// --> 
</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>&nbsp;</td>
<td>数量</td>
</tr>
<tr>
<td>果物</td>
<td><select name="goods1" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="1000">リンゴ（3個入り）1,000円</option>
<option value="450">バナナ 450円</option>
<option value="35900">パイナップル　650円</option>
</select></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><select name="goods2" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="500">牛肉（100g）500円</option>
<option value="400">豚肉（100g）400円</option>
<option value="300">鶏肉（100g）300円</option>
</select></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><select name="goods3" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="110">さけ　110円</option>
<option value="120">さば　120円</option>
<option value="130">いわし　130円</option>
</select></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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0">
円</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>

次は金額を3桁区切りにする方法を探ってみたいと思います。

JavaScriptは3桁区切りにしてくれる関数が存在しないみたいですね。

3桁毎に「,」を挿入する方法と正規表現による置換える方法があるようですが、正規表現による置換えがすっきりしてよさそう。

//3桁カンマ区切り
function addFigure(str) {

　var num = new String(str).replace(/,/g, "");

　while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));

　return num;

}

参考サイト

http://ameblo.jp/linking/entry-10046853346.html