\r\n\r\n\r\n\r\n
\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t
商品名単価数量金額
ウォーターサーバー レンタルコース 買取コース
お水の代金について1,000円
お水の送料について 
合計
消費税
税込合計
\r\n\t
\r\n\t\r\n
\r\n\r\n\r\n\r\n###補足情報(言語/FW/ツール等のバージョンなど)\r\n解る人なら、すぐに解る気がします。\r\nどうか、よろしくお願いいたします。","answerCount":2,"upvoteCount":0,"datePublished":"2016-10-30T14:31:40.272Z","dateModified":"2016-10-30T14:31:40.272Z","acceptedAnswer":{"@type":"Answer","text":"とりあえずは\r\nonChange=\"keisan()\"\r\n↓↓↓\r\nonChange=\"keisan(this.form)\"","dateModified":"2016-10-31T00:25:35.591Z","datePublished":"2016-10-31T00:25:35.591Z","upvoteCount":1,"url":"https://teratail.com/questions/53369#reply-85394"},"suggestedAnswer":[{"@type":"Answer","text":"fがないって言われてるので引数のfになにかいれればいい","dateModified":"2016-10-30T19:49:28.078Z","datePublished":"2016-10-30T19:49:28.078Z","upvoteCount":1,"url":"https://teratail.com/questions/53369#reply-85380","comment":[{"@type":"Comment","text":"ありがとうございます。解決いたしました。","datePublished":"2016-10-31T00:46:30.214Z","dateModified":"2016-10-31T00:46:30.214Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/53369","name":"Javascriptで計算フォームを作りたいです"}}]}}}
質問するログイン新規登録

Q&A

解決済

2回答

4127閲覧

Javascriptで計算フォームを作りたいです

k.nomura

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/10/30 14:31

0

0

###前提・実現したいこと
Javascriptで計算フォームを作りたいです。

###発生している問題・エラーメッセージ
一つ目のラジオボタンはきちんと動くのですが、
二つ目のselectボタンを選ぶと
f is undefined
とエラーが出てしまいます。

###該当のソースコード

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>計算フォーム見本</title> <style type="text/css"> table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } </style> <script type="text/javascript"> function keisan(f){ // 設定開始 var tax = 8; // 消費税率 // ウォーターサーバー var price1 = Number(getRadioValue("server")); function getRadioValue(n) { for(var i = 0, j = f.elements[n].length; i < j; i++) { if(f.elements[n][i].checked) { return f.elements[n][i].value; } } return null; }; document.form1.field1.value = price1; // ウォーターサーバーを表示 // お店の代金について var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // お店の送料について var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total1 = price1 + price2 + price3; // 設定終了 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> </head> <body> <form action="#" name="form1" class="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>ウォーターサーバー</td> <td colspan="2" align="right" nowrap><input type="radio" name="server" value="0" onClick="keisan(this.form)"> レンタルコース <input type="radio" name="server" value="18334" onClick="keisan(this.form)"> 買取コース</td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>お水の代金について</td> <td align="right">1,000円</td> <td><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><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>お水の送料について</td> <td align="right">&nbsp;</td> <td><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><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3">合計</td> <td><input type="text" name="field_total1" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3">消費税</td> <td><input type="text" name="field_tax" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>税込合計</strong></td> <td><input type="text" name="field_total2" size="8" value="0"> 円</td> </tr> </table> <br> <input type="submit" value="送信する"> </form> </body> </html>

###補足情報(言語/FW/ツール等のバージョンなど)
解る人なら、すぐに解る気がします。
どうか、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/10/30 14:40

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

とりあえずは
onChange="keisan()"
↓↓↓
onChange="keisan(this.form)"

投稿2016/10/31 00:25

yambejp

総合スコア118164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k.nomura

2016/10/31 00:46

ありがとうございます。解決いたしました。
guest

0

fがないって言われてるので引数のfになにかいれればいい

投稿2016/10/30 19:49

toutou

総合スコア2052

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k.nomura

2016/10/31 00:46

ありがとうございます。解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問