Javascriptで自動見積りフォームを作ってみる。
目次
課題はたくさんあるものの、いろいろサンプルを探してJavaScriptの自動見積りフォームを作ってみた。
見積金額
合計:0 円
消費税:0 円
税込合計:0 円
合計:0 円
消費税:0 円
税込合計:0 円
見積り
下記項目を選択すると自動計算します。
ソース
<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> </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> </td><br><td> </td><br><td> </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> </td><br></tr><br><tr><br><td>消費税</td><br><td><input type= "text" name= "field_tax" size= "8" value= "0" ><br>円</td><br><td> </td><br></tr><br><tr><br><td>税込合計</td><br><td><input type= "text" name= "field_total2" size= "8" value= "0" ><br>円</td><br><td> </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>} |