■JavaScriptドラックダウンを使った計算書式


動作:ドラックダウンで決定した物品と個数から小計と合計を表示します。

プログラムの流れ

1.ドラックダウンを使って品名を選択する部分は、selectを使用しています。ココでドラックダウンが検出されるとfunction ss1_onclick() {goukei();}によって、goukei()が呼び出されます。

Select使用例)

<select size="1" name="ss1" LANGUAGE=javascript onChange="return ss1_onclick()">
<option selected value="0">なし</option>
<option value="KEN-KEN">すごい製品(ネコ用)</option>
<option value="MiI-MiI">すごい製品(イヌ用)</option>
<option value="TETI-TETI">すごい製品(ハムスター用)</option>
</select>


2.goukei()はsyoukei()を呼び出しています。ドラックダウンから数字情報をもらえないので、selectedIndexを利用し、インデックス番号と相当する数値を tankaT1から得ています。個数指定に付いても同様の処理をしています。

function syoukei(){
a0 = 0;
document.myFORM.ta1.value = tankaT1[document.myFORM.ss1.selectedIndex];

document.myFORM.kg1.value = parseInt(document.myFORM.ta1.value)*ksT[document.myFORM.ks1.selectedIndex];

a0 = parseInt(document.myFORM.kg1.value);
document.myFORM.ta2.value = tankaT2[document.myFORM.ss2.selectedIndex];

document.myFORM.kg2.value = parseInt(document.myFORM.ta2.value)
* ksT[document.myFORM.ks2.selectedIndex];

a0 = a0+parseInt(document.myFORM.kg2.value);
return a0;
}

3.単価のTEXTにta1を入力します。

<input type="text" name="ta1" size="10" value="0" LANGUAGE=javascript
onkeyup="return ta1_onkeyup()">円

4.個数の処理も品目選択と同じ処理をしています。

<SELECT NAME="ks1" size="1" LANGUAGE=javascript onChange="return ks1_onclick()">
<OPTION VALUE="0" SELECTED>0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
</SELECT>

5.小計にkg1が表示されます。

<INPUT SIZE="15" NAME="kg1" VALUE="0" TYPE="text" LANGUAGE=javascript
onkeyup="return kg1_onkeyup()">円

■実際に動作させます。

すごいもの
ちょっとしたもの

■ソースコード


<html>
<head>
<title>フォームでの計算</title>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<LINK REL=StyleSheet HREF="./../../style.css">

<script Language="JavaScript"><!--
var tankaT1 = new Array(0,1000,1000,1000);
var tankaT2 = new Array(0,100,100,100);
var ksT = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12);

function syoukei(){
a0 = 0;

document.myFORM.ta1.value = tankaT1[document.myFORM.ss1.selectedIndex];
document.myFORM.kg1.value = parseInt(document.myFORM.ta1.value)
* ksT[document.myFORM.ks1.selectedIndex];
a0 = parseInt(document.myFORM.kg1.value);

document.myFORM.ta2.value = tankaT2[document.myFORM.ss2.selectedIndex];
document.myFORM.kg2.value = parseInt(document.myFORM.ta2.value)
* ksT[document.myFORM.ks2.selectedIndex];
a0 = a0+parseInt(document.myFORM.kg2.value);

return a0;

}

function goukei(){
b0 = 0;
b0 = syoukei();
document.myFORM.gokei.value = syoukei();
return true;
}

function ss1_onclick() {goukei();}
function ss2_onclick() {goukei();}
function ks1_onclick() {goukei();}
function ks2_onclick() {goukei();}
function ta1_onkeyup() {goukei();}
function ta2_onkeyup() {goukei();}
function kg1_onkeyup() {goukei();}
function kg2_onkeyup() {goukei();}
function gokei_onkeyup() {goukei();}

// --></script>
</head>
<body>

<form name="myFORM">

<table border='1'>

<tr height=30><td>すごいもの</td>

<td>
<select size="1" name="ss1" LANGUAGE=javascript onChange="return ss1_onclick()">
<option selected value="0">なし</option>
<option value="KEN-KEN">すごい製品(ネコ用)</option>
<option value="MiI-MiI">すごい製品(イヌ用)</option>
<option value="TETI-TETI">すごい製品(ハムスター用)</option>
</select>
</td>

<td>
<input type="text" name="ta1" size="10" value="0" LANGUAGE=javascript
onkeyup="return ta1_onkeyup()">円
</td>

<td>
<SELECT NAME="ks1" size="1" LANGUAGE=javascript onChange="return ks1_onclick()">
<OPTION VALUE="0" SELECTED>0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
</SELECT>
</td>

<td>
<INPUT SIZE="15" NAME="kg1" VALUE="0" TYPE="text" LANGUAGE=javascript
onkeyup="return kg1_onkeyup()">円
</td>
</tr>

<tr height=30><td>ちょっとしたもの</td>

<td>
<select size="1" name="ss2" LANGUAGE=javascript onChange="return ss2_onclick()">
<option selected value="0">なし</option>
<option value="karukan">かるかん</option>
<option value="gonta">ミンチスペシャル</option>
<option value="tetiteti">ひまわりの種</option>
</select>
</td>

<td>
<input type="text" name="ta2" size="10" value="0" LANGUAGE=javascript
onkeyup="return ta2_onkeyup()">円
</td>

<td>
<SELECT NAME="ks2" size="1" LANGUAGE=javascript onChange="return ks2_onclick()">
<OPTION VALUE="0" SELECTED>0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
</SELECT>
</td>

<td>
<INPUT SIZE="15" NAME="kg2" VALUE="0" TYPE="text" LANGUAGE=javascript
onkeyup="return kg2_onkeyup()">円
</td>

</tr>

<tr>
<td colspan=3><br></td>
<td>
<INPUT SIZE="15" NAME="gokei" VALUE="0" TYPE="text" LANGUAGE=javascript
onkeyup="return gokei_onkeyup()">円
</td>
</tr>
</table>
</form>

</body>
</html>

Copyright (C) 錬金術師Masa
初版:2004年9月01日
更新:2005年8月13日
http://www.katch.ne.jp/~mh524-1997/