logo logo_banner

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

2010年9月21日 | トラックバック(0)

配列をうまく使えないので、同じような処理を繰り返しており課題はあるものの

なんとかラジオボタンで選択した金額を計算できる自動見積りフォームを作ってみた。

 

見積金額
合計：0 円
消費税：0 円
税込合計：0 円

見積り

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

商品 グレード5 グレード4 グレード3 グレード2 グレード1 数量
液晶テレビ 120,000円 40,000円 20,000円 15,000円 10,000円
エアコン 80,000円 60,000円 40,000円 20,000円 10,000円
パソコン 60,000円 40,000円 20,000円 10,000円 5,000円
             
合計 円          
消費税 円          
税込合計 円          

 

ソース

<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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>

［記事編集］

トラックバック(0)

トラックバックURL:

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

2010年9月21日 | トラックバック(0)

前回は金額が3桁区切りになっていなかったので、

今回は3桁区切りを加えてみた。

 

見積金額
合計：0 円
消費税：0 円
税込合計：0 円

見積り

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

商品   数量
果物
肉
魚
     
合計 円  
消費税 円  
税込合計 円  

 

 

<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); //消費税を計算
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>&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>

［記事編集］

トラックバック(0)

トラックバックURL:

JavaScriptで数字をカンマで3桁区切りしてみた。

2010年9月21日 | トラックバック(1)

いろいろ探してみて一番よさそうなサンプルを使用して

金額の数値をカンマで3桁に区切り、

表示できるようやってみた。

 

<body onload="addFigure()">

 

<script type="text/javascript">

 

//3桁カンマ区切り

 

function addFigure() {

 

 var str = 1000000000;

 

 str = String(str).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

 

 document.getElementById("price").innerHTML = str;

}

</script>

 

<div id="price">0</div>

</body>

 

 

これで「1,000,000,000」と表示されるはず

正規表現で数字の間にカンマを置き換えているのですが、

正規表現についてはチンプンカンプンです。

 

 

参考サイト：http://www.coppermine.jp/hasunuma/weblog/2010/05/post.html

［記事編集］

トラックバック(1)

トラックバックURL:

3桁毎カンマ挿入制御 − web tips 追加 - s-ej blog 3桁毎カンマ挿入制御 − web tips 追加 - s-ej blog
(2010年11月19日 21:02)
&nbsp;web tips サンプルを追加しました　3桁毎カンマ挿入制御ページ内のすべての３桁以上の半角数字の数値に、ロード時に3桁区切りカンマ... 続きを読む

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

2010年9月20日 | トラックバック(0)

課題はたくさんあるものの、

いろいろサンプルを探してJavaScriptの自動見積りフォームを作ってみた。

見積金額
合計：0 円
消費税：0 円
税込合計：0 円

見積り

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

商品   数量
果物
肉
魚
     
合計 円  
消費税 円  
税込合計 円  

ソース

<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

［記事編集］

トラックバック(0)

トラックバックURL:

IISでPOST送信すると405エラーが出るときの対処方法

2010年9月20日 | トラックバック(0)

HTTP 405 - 許可されていないリソースです。

とエラーが出る場合。IISでPOST送信が許可されていない場合になるそうです。

ということでネットで調べたら以下の方法が出てきたので試したら解決しました。

 

Windws 2000 Serverの場合

マイコンピュータを右クリックして「管理」を選択

↓

インターネットインフォメーションサービスで該当するサイトを右クリックして「プロパティ」を選択

↓

「ホームディレクトリ」タブの「構成」ボタンをクリック

↓

「アプリケーションのマッピング」タブの「追加」ボタンを押して以下を追加

実行ファイ　→　C:\WINNT\System32\inetsrv\ssinc.dll

拡張子　→　.html

動詞　→　制限　→　GET,POST

ついでに「.htm」も追加しておく。

［記事編集］

トラックバック(0)

トラックバックURL:

Google Chrome ヘッダーとフッターを消して印刷

2010年9月14日 | トラックバック(0)

IEでは印刷の設定で余白やヘッダーとフッターの設定ができますが、

クロームではできないのが現状。

 

しかし、

「IE tab」という拡張機能を使えばとりあえずChromeでもIEと同じように

ヘッダーとフッターを印刷しないようにできる方法はあるようです。

 

方法

  1. 「IE Tab」をインストール
  2. 印刷したいページをクロームで表示
  3. クローム右上の「IE Tab」のボタンを押す
  4. ページ内で右クリックする
  5. 「印刷」を選ぶ

※事前にIEの印刷設定でヘッダーとフッターの印刷をクリアしておくことが必要。

 

「IE Tab」ってクローム内でIEを使うツールなのね...。

結局、一手間必要か...。

でも、ブラウザを二つ起動させなくても済むことができるので、

まぁいっか...。

［記事編集］

トラックバック(0)

トラックバックURL:

大型引越し減少、ニトリ・イケアで家具・家電もファストファッション化？

2010年9月12日 | トラックバック(0)

以下の記事を見た。

【コラム】引っ越し事情が様変わり?! ニトリやIKEAで家具など総買い替えが当たり前、大型引っ越しが減少中
http://news.livedoor.com/article/detail/4712039/
【コラム】引っ越し事情が様変わり?! ニトリやIKEAで家具など総買い替えが当たり前、大型引っ越しが減少中

家具と家電の価格が安くなっているので、

引越しのたびに買い替えを行い、引越の荷物はダンボール数個を送って終わりというスタイルが多いらしい。

家具業界は大変だな...。

 

［記事編集］

トラックバック(0)

トラックバックURL:


« 2010年8月 | メインページ | 2010年9月 »