テイクアウト:料金自動計算滋賀県守山市のホームページ制作

JavaScript

テイクアウト:料金自動計算

飲食店などのテイクアウト用に必要かな?と簡単な料金自動計算のスクリプト書きました。
必要に応じてカスタマイズしてご使用ください。

<html>
<head>
<title>自動計算</title>
<meta charset="utf-8">
<script type="text/javascript">
<!--

function keisan(){
	
//------ START -------

	var tax = 8; // TAX

	// ★ハンバーガー
	var price1 = document.form1.goods1.selectedIndex * 700;
	document.form1.field1.value = price1;

	// ★チーズバーガー
	var price2 = document.form1.goods2.selectedIndex * 800;
	document.form1.field2.value = price2;

	// ★ダブルチーズバーガー
	var price3 = document.form1.goods3.selectedIndex * 1200;
	document.form1.field3.value = price3;
	
	// ★ベーコンチーズバーガー
	var price4 = document.form1.goods4.selectedIndex * 1000;
	document.form1.field4.value = price4;
	
	// ★ベーコンエッグチーズバーガー
	var price5 = document.form1.goods5.selectedIndex * 1100;
	document.form1.field5.value = price5;

	// 小計
	var total1 = price1 + price2 + price3 + price4 + price5;

//------ END -------


	document.form1.field_total1.value = total1; // 小計

	var tax2 = Math.round((total1 * tax) / 100);
	document.form1.field_tax.value = tax2; // 消費税

	document.form1.field_total2.value = total1 + tax2; // 総合計

}

// --> 
</script> 

<style type="text/css">
body {
	margin: 0;
	text-align: center;
}

.priceTable {
	margin: 20px auto
}

.keisanTit {
	padding: 5px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	background: #000;
}

.keisanItem {
	padding: 5px 40px 5px 15px;
	font-size: 14px;
	text-align: left;
	background: #f1f1f1;
}

.keisanNum {
	padding: 5px 10px;
	font-size: 14px;
	text-align: center;
	border-bottom: dotted 1px #ccc;
}

.keisanNum select {
	padding: 5px 10px;
	font-size: 14px;
	text-align: center;
}

.keisanNum option {
	padding: 5px 10px;
	font-size: 14px;
	text-align: center;
	border-bottom: dotted 1px #ccc;
}

.keisanTanka {
	padding: 5px 20px;
	font-size: 14px;
	text-align: right;
	border-bottom: dotted 1px #ccc;
}

.textPrice {
	padding: 5px 10px;
	font-size: 14px;
	text-align: right;
	border-bottom: dotted 1px #ccc;
}

.textTotal {
	padding: 5px 10px;
	font-size: 14px;
	text-align: right;
	border-bottom: solid 2px #555;
}

.keisanPrice {
	padding: 5px 10px;
	font-size: 14px;
	text-align: right;
	border-bottom: dotted 1px #ccc;
}

.keisanPrice input[type=text] {
	padding: 5px 10px;
	font-size: 14px;
	text-align: right;
	border: none;
}

.keisanTotal {
	padding: 5px 10px;
	font-size: 14px;
	text-align: right;
	border-bottom: solid 2px #f66;
}

.keisanTotal input[type=text] {
	padding: 5px 10px;
	font-size: 18px;
	text-align: right;
	border: none;
}

</style>
</head>
<body>

<form action="#" name="form1">

<table class="priceTable">
   <tr>
      <th class="keisanTit">商品名</th>
      <th class="keisanTit">単価</th>
      <th class="keisanTit">数量</th>
      <th class="keisanTit">金額</th>
   </tr>
   <tr>
      <td class="keisanItem">★ハンバーガー</td>
      <td class="keisanTanka">700円</td>
      <td class="keisanNum"><select name="goods1" onChange="keisan()">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select></td>
      <td class="keisanPrice"><input type="text" name="field1" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td class="keisanItem">★チーズバーガー</td>
      <td class="keisanTanka">800円</td>
      <td class="keisanNum"><select name="goods2" onChange="keisan()">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select></td>
      <td class="keisanPrice"><input type="text" name="field2" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td class="keisanItem">★ダブルチーズバーガー</td>
      <td class="keisanTanka">1,200円</td>
      <td class="keisanNum"><select name="goods3" onChange="keisan()">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select></td>
      <td class="keisanPrice"><input type="text" name="field3" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td class="keisanItem">★ベーコンチーズバーガー</td>
      <td class="keisanTanka">1,000円</td>
      <td class="keisanNum"><select name="goods4" onChange="keisan()">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select></td>
      <td class="keisanPrice"><input type="text" name="field4" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td class="keisanItem">★ベーコンエッグチーズバーガー</td>
      <td class="keisanTanka">1,100円</td>
      <td class="keisanNum"><select name="goods5" onChange="keisan()">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      </select></td>
      <td class="keisanPrice"><input type="text" name="field5" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td colspan="3" class="textPrice">小計</td>
      <td class="keisanPrice"><input type="text" name="field_total1" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td colspan="3" class="textPrice">消費税</td>
      <td class="keisanPrice"><input type="text" name="field_tax" size="8" value="0"> 円</td>
   </tr>
   <tr>
      <td colspan="3" class="textTotal"><strong>税込合計</strong></td>
      <td class="keisanTotal"><input type="text" name="field_total2" size="8" value="0"> 円</td>
   </tr>
</table>
<button type="submit" class="reset">リセット</button>
</form>

</body>
</html>

サンプル