JavaScriptによる自動計算フォーム

解決済

質問者：Rafi
質問日時：2014/08/31 13:23
回答数：1件

サンプルを読んだりは多少わかる範囲なのですが、カスタムの段階で詰まってしまいましたのでお知恵お貸し頂ければと思います。

積算の自動計算フォームを作成しようとしてるのですが、サンプルでよくあるものが固定数値×プルダウン＝小計のようなものが多く、この固定数を入力フォーム、プルダウンも入力フォームに切り替えたいのですが、変更すると合計欄がNaNと表示されてしまいます。
何か指定が間違っているのでしょうか。

こちらのサイトを参考に作っています。
http://www.tagindex.com/javascript/form/comp1b.h …

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： yagijijii
回答日時：2014/08/31 20:08

まず、ご質問の内容についてですが・・・、

実際のコードを示せば、すぐに的確な回答がついたかもしれません。

本題に戻ります。たぶんどこかで構文ミスをしているのでしょう。
私もよくやってしまうのですが、NaN や undefined が出ます。

内容が複雑ではないので、私なりに作成してみました。
入力フォームということで、テキストボックスで良いでしょうか。

<html><head>
<script type='text/javascript'>
function keisan(){
var price1 = (document.form1.tanka1.value) * (document.form1.suryo1.value);
document.form1.kingaku1.value = price1 ;
var price2 = (document.form1.tanka2.value) * (document.form1.suryo2.value);
document.form1.kingaku2.value = price2 ;
var price3 = (document.form1.tanka3.value) * (document.form1.suryo3.value);
document.form1.kingaku3.value = price3 ;
document.form1.total.value = price1 + price2 +price3;
}
</script></head>
<body>
<form name='form1'>
<table border='1'>
<tr><td align='center'>商品</td>
<td align='center'>単価</td>
<td align='center'>数量</td>
<td align='center'>金額</td></tr>
<tr><td>商品1</td>
<td><input type='text' name='tanka1' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo1' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku1' style='width:100px' />円</td></tr>
<tr><td>商品2</td>
<td><input type='text' name='tanka2' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo2' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku2' style='width:100px' />円</td></tr>
<tr><td>商品3</td>
<td><input type='text' name='tanka3' onChange='keisan()' style='width:100px' />円</td>
<td><input type='text' name='suryo3' onChange='keisan()' style='width:50px' /></td>
<td><input type='text' name='kingaku3' style='width:100px' />円</td></tr>
<tr><td align='right' colspan=3>合計</td>
<td><input type='text' name='total' style='width:100px' />円</td></tr>
</table>
</form>
</body></html>