<!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>
関連記事 - More from my site -