<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>概算御見積フォーム</title> <style> table.type09 { border-collapse: collapse; text-align: left; line-height: 1.5; } table.type09 thead th { padding: 10px; font-weight: bold; vertical-align: top; color: #369; border-bottom: 3px solid #036; } table.type09 tbody th { width: 150px; padding: 10px; font-weight: bold; vertical-align: top; border-bottom: 1px solid #ccc; background: #f3f6f7; } table.type09 td { width: 350px; padding: 10px; vertical-align: top; border-bottom: 1px solid #ccc; } button#submit_button { padding: 15px 40px; font-size: 1.2em; // 背景色を黒に指定 background-color: #000; // 文字色を白に指定 color: #fff; // submitボタンのを枠を非表示にする border-style: none; } #wrapper { width: 1000px; margin: auto; } </style> <div onscroll="display_account()"> <script type="text/javascript"> <!-- function keisan(){ // 計算開始 var tax = 5; // 消費税率 var price1 = parseInt(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価 var price2 = parseInt(document.form1.goods2.value) * document.form1.volume2 .selectedIndex; var price3 = parseInt(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; } //3桁カンマ区切り function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } // フォーム submitボタンの遷移先の指定 function goMail(){ document.getElementById('form1').action = 'est_mail.php'; document.getElementById('form1').target = ''; } function goPdf(){ document.getElementById('form1').action = 'est_done.php'; document.getElementById('form1').target = '_blank'; } </script> </head> <body> <div id="wrapper"> <h1>概算御見積りシステム デモ</h1> <p>これは動作確認用のデモです。</p> <p>下記項目を選択すると自動計算します。</p> <form name="form1" action="" id="form1" method="post"> <table class="type09"> <tr> <td>お客様名(必須)</td> <td><input type="text" name="customer_name"></td> <td></td> </tr> <tr> <td>会社名</td> <td><input type="text" name="company_name"></td> <td></td> </tr> <tr> <td>Email(必須)</td> <td><input type="text" name="email"></td> <td></td> </tr> <tr> <td>電話番号</td> <td><input type="text" name="tel"></td> <td></td> </tr> <tr> <td>住所</td> <td><input type="text" name="address"></td> <td></td> </tr> </table> <hr/> <table class="type09"> <tr> <td>ジャンル</td> <td>商品選択</td> <td>数量</td> </tr> <tr> <td>小物</td> <td><select name="goods1" onChange="keisan()"> <option value="0" selected="selected">選択してください</option> <option value="1000">USBメモリ(3個入り)1,000円</option> <option value="450">ペンドライブ 450円</option> <option value="35900">貯金箱 35900円</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">ジンバブエドル 400円</option> <option value="300">BC 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></td> <td></td> <td></td> </tr> <tr> <td>合計</td> <td><input type="text" name="field_total1" size="8" value="0"> 円</td> <td> </td> </tr> <tr> <td>消費税</td> <td><input type="text" name="field_tax" size="8" value="0"> 円</td> <td> </td> </tr> <tr> <td>税込合計</td> <td><input type="text" name="field_total2" size="8" value="0"> 円</td> <td> </td> </tr> </table> <div id="display_account" > 見積金額<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> <hr/> <div align="center"> <button id="submit_button" type="submit" name="submit" onClick="goPdf()">お見積書PDFダウンロード</button> <button id="submit_button" type="submit" name="submit" onClick="goMail()">見積依頼送信</button> </div> </form> </div><!--#wrapper--> </body>