見積 on qwerty.work

Javascriptで自動見積もりフォームを作ってみる。（その2）

Tue, 21 Sep 2010 16:38:49 +0900

前回は金額が3桁区切りになっていなかったので、今回は3桁区切りを加えてみた。

// // 170 ){ document.getElementById(“display_account”).style.top = position_top + “px”; } } window.onload = function() { var isIE = 0 見積金額合計：0 円消費税：0 円税込合計：0 円

見積り

下記項目を選択すると自動計算します。

商品

数量

果物

選択してくださいリンゴ（3個入り）1,000円バナナ 450円パイナップル　650円

0 1 2 3 4 5 6 7 8 9 10

肉

選択してください牛肉（100g）500円豚肉（100g）400円鶏肉（100g）300円

0 1 2 3 4 5 6 7 8 9 10

魚

選択してくださいさけ　110円さば　120円いわし　130円

0 1 2 3 4 5 6 7 8 9 10

合計円

消費税円

税込合計円

ソース

<div onscroll="display_account()"><br /><script type="text/javascript"><br /><!--
function keisan(){
var tax = 5; // 消費税率
var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価<br />var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;<br />var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;
var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 税抜き合計を計算<br />var tax2 = Math.round((total1 * tax) / 100); //消費税を計算<br />var total2 = total1 + tax2; //税込み合計を計算
//表示用の金額を3桁区切りに変換<br /> var data = new Array(total1,tax2,total2); //金額を配列に格納<br /> var len = data.length; //配列の数を取得
for(cnt=0;cnt<len;cnt++){<br /> <span color="red" style="color: red;">data[cnt] = new String(data[cnt]).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); //ここで正規表現で3桁ごとにカンマで区切る</span><br /> }
//フォームのテキストエリアに表示する金額<br />document.form1.field_total1.value = data[0]; // 税抜き合計<br />document.form1.field_tax.value = data[1]; // 消費税<br />document.form1.field_total2.value = data[2]; // 税込合計
//右の窓に表示する金額<br />document.getElementById("display_account_amount").innerHTML = data[0]; // 税抜き合計<br />document.getElementById("display_account_tax").innerHTML = data[1]; // 消費税<br />document.getElementById("display_account_all").innerHTML = data[2]; // 税込合計
}
// --> <br /></script><br /><script type="text/javascript"><br /><!--<br />function display_account() {<br />var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){<br />document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {<br />var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");<br />if(isIE && document.compatMode=="BackCompat"){<br />document.body.onscroll = display_account;<br />}else{<br />document.documentElement.onscroll = display_account;<br />}<br />}<br />//--><br /></script><br /><div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br /><br />合計：<span id="display_account_amount">0</span> 円<br /><br />消費税：<span id="display_account_tax">0</span> 円<br /><br />税込合計：<span id="display_account_all">0</span> 円<br /><br /></div><br /><h1>見積り</h1><br /><p>下記項目を選択すると自動計算します。</p><br /><form name="form1" action="" id="form1" method="post"><br /><table><br /><tr><br /><td>商品</td><br /><td>&nbsp;</td><br /><td>数量</td><br /></tr><br /><tr><br /><td>果物</td><br /><td><select name="goods1" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="1000">リンゴ（3個入り）1,000円</option><br /><option value="450">バナナ 450円</option><br /><option value="35900">パイナップル　650円</option><br /></select></td><br /><td><select name="volume1" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>肉</td><br /><td><select name="goods2" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="500">牛肉（100g）500円</option><br /><option value="400">豚肉（100g）400円</option><br /><option value="300">鶏肉（100g）300円</option><br /></select></td><br /><td><select name="volume2" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>魚</td><br /><td><select name="goods3" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="110">さけ　110円</option><br /><option value="120">さば　120円</option><br /><option value="130">いわし　130円</option><br /></select></td><br /><td><select name="volume3" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>&nbsp;</td><br /><td>&nbsp;</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td></td><br /><td></td><br /><td></td><br /></tr><br /><tr><br /><td>合計</td><br /><td><input type="text" name="field_total1" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td>消費税</td><br /><td><input type="text" name="field_tax" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td>税込合計</td><br /><td><input type="text" name="field_total2" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /></table><br /></form><br /></div>

Javascriptで自動見積りフォームを作ってみる。

Mon, 20 Sep 2010 18:21:57 +0900

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

見積り

下記項目を選択すると自動計算します。

商品

数量

果物

選択してくださいリンゴ（3個入り）1,000円バナナ 450円パイナップル　650円

0 1 2 3 4 5 6 7 8 9 10

肉

選択してください牛肉（100g）500円豚肉（100g）400円鶏肉（100g）300円

0 1 2 3 4 5 6 7 8 9 10

魚

選択してくださいさけ　110円さば　120円いわし　130円

0 1 2 3 4 5 6 7 8 9 10

合計円

消費税円

税込合計円

ソース

<div onscroll="display_account()">
<script type="text/javascript"><br /><!--
function keisan(){
// 計算開始
var tax = 5; // 消費税率<br /><br />
var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価<br />
var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;<br />
var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;<br /><br />var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 合計を計算<br />var tax2 = Math.round((total1 * tax) / 100); //消費税を計算
// フォームのテキストエリアに表示する金額<br />
document.form1.field_total1.value = total1; // 合計を表示<br />
document.form1.field_tax.value = tax2; // 消費税を表示<br />
document.form1.field_total2.value = total1 + tax2; // 税込合計を表示
//右の窓に表示する金額<br />
document.getElementById("display_account_amount").innerHTML = total1;<br />
document.getElementById("display_account_tax").innerHTML = tax2;<br />
document.getElementById("display_account_all").innerHTML = total1 + tax2;
}
// --> <br /></script>
 
<script type="text/javascript"><br />
<!--<br />function display_account() {<br />var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){<br />document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {<br />var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");<br />if(isIE && document.compatMode=="BackCompat"){<br />document.body.onscroll = display_account;<br />}else{<br />document.documentElement.onscroll = display_account;<br />}<br />}<br />//--><br /></script>
<div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br /><br />合計：<span id="display_account_amount">0</span> 円<br /><br />消費税：<span id="display_account_tax">0</span> 円<br /><br />税込合計：<span id="display_account_all">0</span> 円<br /><br /></div><br /><h1>見積り</h1><br /><p>下記項目を選択すると自動計算します。</p><br /><form name="form1" action="" id="form1" method="post"><br /><table><br /><tr><br /><td>商品</td><br /><td>&nbsp;</td><br /><td>数量</td><br /></tr><br /><tr><br /><td>果物</td><br /><td><select name="goods1" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="1000">リンゴ（3個入り）1,000円</option><br /><option value="450">バナナ 450円</option><br /><option value="35900">パイナップル　650円</option><br /></select></td><br /><td><select name="volume1" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>肉</td><br /><td><select name="goods2" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="500">牛肉（100g）500円</option><br /><option value="400">豚肉（100g）400円</option><br /><option value="300">鶏肉（100g）300円</option><br /></select></td><br /><td><select name="volume2" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>魚</td><br /><td><select name="goods3" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="110">さけ　110円</option><br /><option value="120">さば　120円</option><br /><option value="130">いわし　130円</option><br /></select></td><br /><td><select name="volume3" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>&nbsp;</td><br /><td>&nbsp;</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td></td><br /><td></td><br /><td></td><br /></tr><br /><tr><br /><td>合計</td><br /><td><input type="text" name="field_total1" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td>消費税</td><br /><td><input type="text" name="field_tax" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td>税込合計</td><br /><td><input type="text" name="field_total2" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /></table><br /></form><br /></div>

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

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

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

//3桁カンマ区切り<br />function addFigure(str) {<br /><br />　var num = new String(str).replace(/,/g, "");<br /><br />　while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));<br /><br />　return num;<br /><br />}

参考サイト

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