ラジオボタンで選択した商品の合計金額を表示したい

このQ&Aのポイント
  • 簡単な見積フォームを作成中です。ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。
  • 根本的な考え方が間違っているのでしょうか?皆様ご教授の程お願いします。
  • このHTMLコードでは、ラジオボタンで選択された商品の金額を取得して合計金額を表示することができます。ただし、現在は合計金額が”undefined”と表示される問題があります。
回答を見る
  • ベストアンサー

ラジオボタンで選択した項目の合計金額を出したい

簡単な見積フォームを作成中です。 ラジオボタンで商品を選択して、その合計金額を表示させたいのですが、何故か”undefined”と表示されてしまいます。 根本的な考え方が間違っているのでしょうか? 皆様ご教授の程お願いします。 <HTML><HEAD> <!-- function calc(){ hontai=document.ordersheet.hontai.VALUE; document.ordersheet.output.value=hontai; } //--> </SCRIPT></HEAD> <BODY> <FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()"> <TABLE cellPadding=3 width=680> <TBODY><TR> <TD align=middle colSpan=5>お見積り内容 <TR><TD align=middle width=30> <TD align=middle width=200> <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 <TD align=middle width=150>商品名 </TD> <TR><TD rowspan="2" align=middle width=30>本体 <TD rowspan="2" width=350></TD> <TD width=145>A商品<BR>273000円(税込)<BR> <TD width=145>B商品<BR>288750円(税込)<BR> <TD width=145>C商品<BR>109410円(税込)<BR> </TD> <TR> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="273000" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="288750" onClick="calc()"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" VALUE="109410" onClick="calc()"></DIV></TD> </TR> <TR><TD align=center colspan="2">合計金額</TD> <TD colspan="3" ><INPUT TYPE="text"NAME="output" SIZE="12">円</TD></TR> </TBODY></TABLE></FORM> </BODY></HTML>

質問者が選んだベストアンサー

  • ベストアンサー
  • kaiu
  • ベストアンサー率20% (65/315)
回答No.1

すみません。 失礼なのですが、javascriptより先に HTMLから見直した方がよろしいかと思いました。 おせっかいながらとても見づらかったので、 全部やりなおしてしまいました。 レイアウトはまた修正してください。 差分を取ってじっくり見直してください。 ケアレスミスもあります。 ラジオボタンやセレクトボタン等の取り方は 存在回数分ループで回すのが基本です。 --------------------------------------------- <HTML> <HEAD> <script language="JavaScript"> <!-- function calc() { for(i = 0; i < 3; i++ ) { if(hontai = document.ordersheet.hontai[i].checked) { document.ordersheet.output.value = document.ordersheet.hontai[i].value; } } } //--> </SCRIPT> </HEAD> <BODY onLoad=(document.ordersheet.output.value="0")> <FORM NAME="ordersheet" METHOD="POST"onsubmit="return check()"> <TABLE cellPadding=3 width=680> <TBODY> <TR> <TD align=middle colspan=5>お見積り内容</TD> </TR> <TR> <TD align=middle width=30></TD> <TD align=middle width=200></TD> <TD align=middle width=150>商品名</TD> <TD align=middle width=150>商品名</TD> <TD align=middle width=150>商品名</TD> </TR> <TR> <TD align=center colspan="2">本体</TD> <TD width=150>A商品<BR>273000円(税込)</TD> <TD width=150>B商品<BR>288750円(税込)</TD> <TD width=150>C商品<BR>109410円(税込)</TD> <TR> </TR> <TD align=middle width=30></TD> <TD align=middle width=200></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" onClick="calc()" VALUE="273000"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" onClick="calc()" VALUE="288750"></DIV></TD> <TD><DIV><INPUT TYPE="radio" NAME="hontai" onClick="calc()" VALUE="109410"></DIV></TD> </TR> <TR> <TD align=center colspan="2">合計金額</TD> <TD colspan="3"> <INPUT TYPE="text" NAME="output" value="0" SIZE="12">円</TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML> -------------------------------------------------

tkmkkun
質問者

お礼

大変親切にどうもありがとうございました。 まだまだ日が浅いので、質問するときのマナーもなっていませんで申し訳ありませんでした。 出来ればJAVAやHTMLについて良い本があればお教え願えるでしょうか?

その他の回答 (1)

  • kaiu
  • ベストアンサー率20% (65/315)
回答No.2

いえいえ。 こちらこそお役に立ててよかったです。 htmlやjavascriptは案外サイトが充実しているので 本は分からないのですが、 リファレンス代わりにいくつか 挙げておきますね。 頑張ってください。 http://www.hajimeteno.ne.jp/index.html http://www.tagindex.com/index.html http://www.openspc2.org/reibun/javascript/

tkmkkun
質問者

お礼

重ね重ね本当にアドバイスありがとうございます。 教えていただいたサイトを参考に知識向上に励みます。 また、機会がありましたらアドバイスお願いします。

関連するQ&A

  • チェックボックスやラジオボタンでの計算

    チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております ソース途中からですが…↓ <tr> <Td Valign="middle" Width="80">部数選択</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br> <Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br> <Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br> <Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br> <Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以上 ※お見積もりいたします<Br> </td> </tr> <tr> <Td Valign="middle" Width="80">オプション選択<Br>(複数選択可)</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br> <Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br> <Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br> <Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br> <Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br> <Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br> <Input Type="checkbox" Name="op[]" value="QRコード">QRコード<Br> </td> </tr> といった感じです。 value はすでに、他のところで使用しています 単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか?

  • ラジオボタンが選択された項目のみ操作可能

    ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled?readonly? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />A小学校<br/> <input type="checkbox" name="aa[]" value="2" />B小学校<br/> <input type="checkbox" name="aa[]" value="3" />C小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />A中学校<br/> <input type="checkbox" name="bb[]" value="2" />B中学校<br/> <input type="checkbox" name="bb[]" value="3" />C中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • ラジオボタンでテーブルの背景色を変える

    いつもお世話になっています。 テーブルで数十行同じ項目を表示させるとき、今何行目を見ているかわかりやすいように 目印をつけたいと思っています。 ラジオボタンを配置したのですが、一行が横に長く、区別しにくいため 加えて選択されたラジオボタンと同じ行の背景色を変えようと思いました。 が、こういうことってできるのでしょうか? ラジオボタン選択でウィンドウの色を変える方法の応用かなと思って 色々試しましたが全て失敗でした(涙)。 どなたかご存知の方、教えてください。 ちなみにテーブルのイメージは大体こんな感じです↓ <p align=center> <TABLE frame=below rules=all WIDTH=98% vspace=100> <tr> <td width=7% align=right><input type="radio" name="count" value="1"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right><input type="radio" name="count" value="2"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right><input type="radio" name="count" value="3"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> </table>

  • フォームタグの中のラジオボタンの選択による制御

    まず、サンプルのHTMLソースを書きます。 <html> <head> <title>プレゼント </title> head> <body> <center> <form method="post" action="https://regist02.smp.ne.jp/regist/Reg2"> table cellspacing="2" cellpadding="5" border="1"> <tr> <td>プレゼント</td> <td> <input type="radio" name="f000016397" value="1"> 希望する<br> <input type="radio" name="f000016397" value="2"> 希望しない<br> </td> </tr> <tr> <td>カラー</td> <td> <input type="text" name="f000009756" value="" maxlength="6"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="送信"> </td> </tr> </table> </form> </center> </body> </html> この中で、「プレゼントを希望する」のラジオボタンをチェックした場合のみ、下のテキストボックスにカラーが入力できるようにしたいと思います。 「プレゼントの希望をしない」を選択しているのに、テキストボックスに文字が入力されたないように制御することはできるでしょうか?またはデータが送信されないで警告k画面が出る方法でもよいのですが。 宜しくお願いします。

  • 選択したテーブルのセルの背景色を変更させる方法

    こんばんは。 現在クイズをcgiで作っており(20問程度)、自分が選択した答えの背景を変化させたいと考えております。 問題はテーブル内に収めています。 ↓はcgi内で作成している部分のテーブルサンプルです <form action="./test.cgi" method="post"> <table width="520" border="1" cellpadding="5" cellspacing="0" class="check" align="right"> <tr> <td width="420" align="center"><b>$title</b></td> <td width="100" colspan="2" align="center"><b>回答欄</b></td> </tr> <tr> <td width="420">1.$q3</td> <td width="50"><input type="radio" name="3" value="1">$a31</td> <td width="50"><input type="radio" name="3" value="2">$a32</td> </tr> <tr> <td width="420">2.$q4</td> <td width="50"><input type="radio" name="4" value="1">$a41</td> <td width="50"><input type="radio" name="4" value="2">$a42</td> </tr> <tr> <td width="420">3.$q5</td> <td width="50"><input type="radio" name="5" value="1">$a51</td> <td width="50"><input type="radio" name="5" value="2">$a52</td> </tr> <tr> <td width="10"></td> <td width="540" align="center"> <input type="hidden" name="action" value="result"> <input type="image" src=".././img/diagnose.gif" border="0"> </td> </tr> </table> </form> Java Scriptでテーブルのセルにidをふればできると聞き、初心者ながら色々試してみたものの、なかなかうまくいきません。 どなたかご教授お願いいたします。

  • フォームタグの中のラジオボタンの選択による制御

    まず、サンプルのHTMLソースを書きます。 <html> <head> <title>プレゼント </title> head> <body> <center> <form method="post" action="https://regist02.smp.ne.jp/regist/Reg2"> table cellspacing="2" cellpadding="5" border="1"> <tr> <td>プレゼント</td> <td> <input type="radio" name="f000016397" value="1"> 希望する<br> <input type="radio" name="f000016397" value="2"> 希望しない<br> </td> </tr> <tr> <td>カラー</td> <td> <input type="text" name="f000009756" value="" maxlength="6"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="送信"> </td> </tr> </table> </form> </center> </body> </html> この中で、「プレゼントを希望する」のラジオボタンをチェックした場合のみ、下のテキストボックスにカラーが入力できるようにしたいと思います。 「プレゼントの希望をしない」を選択しているのに、テキストボックスに文字が入力されたないように制御することはできるでしょうか?またはデータが送信されないで警告k画面が出る方法でもよいのですが。 宜しくお願いします。

  • 複数のテーブルをラジオボタンで背景を変える

    javascriptは、まだ全くの初心者で色々探しながら勉強しています。 過去の質問で動作が似ているものがあったのですが、 複数のテーブルに使えるように変更したいのですが 全くやり方が分かりません。 宜しくお願い致します。 2つのテーブルがあります。 id=AAA と言うテーブルは、今日の天気のラジオボタン id=BBB と言うテーブルは、今日の花粉のラジオボタン だとします。 各テーブル内のラジオボタンが選択されたら、 そのテーブルだけに影響するセルの色変更。 つまり、 AAAのテーブル内のラジオボタン選択時は、AAAのセルの色を黄 BBBのテーブル内のラジオボタン選択時は、BBBのセルの色を赤 にしたいのです。 下記にサンプルコードを書きました。 これだと、AAAのテーブルのラジオボタンをクリックすると BBBのテーブルの背景色がクリアされてしまいます。 どうやって引数を渡していいのか分かりません。 宜しくお願い致します。 <html> <head> <title>test</title> <script type="text/javascript"> <!-- var saveTr; function setBg(rd) { if(saveTr) saveTr.bgColor="white"; saveTr=rd.parentNode.parentNode; saveTr.bgColor="yellow"; } --> </script> </head> <body> <table id='AAA'> <tr><td> 今日の天気 </td></tr> <tr><td> <input type='radio' name='tenki' value='1' onClick="setBg(this);">晴れ<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='2' onClick="setBg(this);">曇り<br> </td></tr> <tr><td> <input type='radio' name='tenki' value='3' onClick="setBg(this);">雨<br> </td></tr> </table> <br> <table id='BBB'> <tr><td> 花粉の量 </td></tr> <tr><td> <input type='radio' name='kafun' value='1' onClick="setBg(this);">多い<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='2' onClick="setBg(this);">普通<br> </td></tr> <tr><td> <input type='radio' name='kafun' value='3' onClick="setBg(this);">少ない<br> </td></tr> </table> </body> </html>

  • VBAでWebページに入力&ボタンクリック

    URLがhttp://xxx.com/のページで次のようなフォームのときExcelで自動入力クリックするマクロを作りたいです。 <input type="hidden" name="room" value="aaaaa"/> <a name="regist" id="regist">総登録数</a> <table width="402" border="1"> <tr> <th align="center" colspan="2"><div align="left"><big>登録ページ</big></div></th> </tr> <tr> <td colspan="2">&nbsp;&nbsp;&nbsp;name <input type="text" size="20" name="name" value="" maxlength="20"> &nbsp;&nbsp;&nbsp;Email <input type="text" size="20" name="email" value=""> &nbsp;&nbsp;</td> </tr> <tr> <td align="center">pass</td> <td><input type="text" size="20" name="pw" maxlength="12" value=""></td> </tr> <tr> <td align="center">category</td> <td><select size="1" name="junle"> <option value="pp" selected="selected">カテゴリ選択</option> <option value="0">その1</option> <option value="1">その2</option> </select></td> </tr> <tr> <td align="center">title</td> <td><input type="text" size="55" name="title" maxlength="25" value=""></td> </tr> <tr> <td align="center">URL</td> <td><input type="text" size="55" name="url"></td> </tr> <tr> <td align="center">intro</td> <td><input type="text" name="comment" size="55" maxlength="50" value=""></td> </tr> <tr align="center"> <td><br></td> <td><input type="submit" name="mode" value="登録"> <input type="reset" value="クリア"></td> </tr> </table> 入力する内容は1行目のA,B,C・・にname,email,pass・・・が順番にそれぞれ入っています。

  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効) 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>