フォームの数値計算

質問

今、ＨＴＭＬにて数量の計算をJavaScriptで組みたいのですが、
<form>タグ（例えば<input type="text" size="2" name="aaa" value="0">の場合
だと「aaa」）に入力された数値を取り、最終的には、複数の<form>タグに入力された
数値の合計を合計用の別な<form>タグに自動で入力されるようにしたいのですが、
そちらの方もいまいち解りません。

　どなたか、手法を教えていただきたいのですが。　よろしくお願いします。

回答No.1

HUTABA · ベストアンサー

■フォーム----------------------------------------
<FORM NAME="A">
<INPUT TYPE="text" NAME="aaa" VALUE="0" onChange="Result();">
</FORM>

<FORM NAME="B">
<INPUT TYPE="text" NAME="bbb" VALUE="1" onChange="Result();">
</FORM>

<FORM NAME="C">
<INPUT TYPE="text" NAME="ccc" VALUE="2" onChange="Result();">
</FORM>

<FORM NAME="D">
<INPUT TYPE="text" NAME="ddd">
</FORM>

■JavaScript--------------------------------------
function Result ()
{
　intResult = 0;
　if (!isNaN(document.A.aaa.value)) intResult += parseInt (document.A.aaa.value);
　if (!isNaN(document.B.bbb.value)) intResult += parseInt (document.B.bbb.value);
　if (!isNaN(document.C.ccc.value)) intResult += parseInt (document.C.ccc.value);

　document.D.ddd.value = intResult;
}

if (!isNaN(document.A.aaa.value))
isNaNは、数値でない値が入っていた場合にtrueを返します。
これで数値が入力されていない場合に対応しています。

intResult += parseInt (document.A.aaa.value);
parseInt()は、文字列を数値化する関数です。
フォームから取得したデータは、全て文字列として扱われますので、そのまま+しても期待したように動作しません。

ただし、onChangeを使用している、数値入力後、どこかをクリックする等しないとResultが読み込まれません。
「合計」ボタンなんかを用意した方が良いかもしれません。

お礼

丁寧に解説までいただき、有難うございました。

　おかげで、うまく出来ました。