• 締切済み

ラジオボタンの値取得

お世話になります。 今回のHTML作成が初めてとなります。 今回メールフォームの作成をしていて、 流れとしては「フォーム」⇒「確認画面」⇒「メール送信」という風に作っています。 テキストについてはフォームからメールまで値が伝わるように出来たのですが、 ラジオボタンの値だけが確認画面に伝わりません。 ■メールフォーム <script language="JavaScript"> <!-- function kakunin(){ if (shopnumber.value == ""||shopname.value == ""||shainnumber.value ==""||shainname.value ==""){ alert("必須項目が入力されていません。"); } else{ window.open("kakunin.html","確認",""); } } //--> </script> </head> ・ ・ <tr> <td width="11" height="49" bgcolor="#FF99FF"></td> <td width="445" height="49"> ご購入方法<br> <input type="radio" name="Kounyu" value="購入(1)" checked>購入(1)<br> <input type="radio" name="Kounyu" value="購入(2)">購入(2)<br> <input type="radio" name="Kounyu" value="購入(3)">購入(3) ・ ・ <input id="ExecOpen" type="button" value="確認画面へ" onClick="kakunin()" name="button"> ■確認画面 <SCRIPT LANGUAGE="JavaScript"> <!-- function settext(){ document.form1.msg.value="\n"+"■注文情報■"+"\n"+ ・ ・ "【カラー】"+window.opener.Kounyu.value+"\n"+ "【購入方法】"+window.opener.Kounyu.value+"\n"+ "【質問内容】"+window.opener.Kounyu.value+"\n"; ・ ・ document.all.kakuninTable.tBodies[0].rows[8].cells[1].innerText=window.opener.Kounyu.value; document.all.kakuninTable.tBodies[0].rows[9].cells[1].innerText=window.opener.Kounyu.value; document.all.kakuninTable.tBodies[0].rows[10].cells[1].innerText=window.opener.Kounyu.value; fOBJ = document.form1; for (i=1; i<4; i++) if (fOBJ.elements[i].checked) fKounyu = fOBJ.elements[i].value; } //--> </script> ・ ・ <form method="POST" name=form1 action="mailto:xxxxxx@xxxxxx.co.jp?subject=問い合わせ" enctype="text/plain"> ・ ・ <input type="hidden" name=msg value="注文内容"> <input type="submit" value="メール送信"> <input type="button" value="戻る"　onclick="javascript:window.close()" > 要所のみ抜粋ですが、上のように書いたところ ラジオボタンの値が「undefined」と出てしまいます。 ココのサイトに同じような質問がありましたが、 内容が今回挙げたものと異なっていたので 改めて質問させていただきました。 宜しくお願いします。

みんなの回答

  • OKbokuzyo
  • ベストアンサー率43% (130/296)
回答No.2

細かい部分が見えないからあくまで一例で紹介します。 <html> 　<script language="JavaScript" type="text/javascript"> 　　function RadioTest(){ 　　　var a = document.getElementsByTagName("input"); 　　　var i; 　　　for(i=0;i<a.length;i++){ 　　　　if(a[i].name == "Kounyu"){ 　　　　　if(a[i].checked == true){ 　　　　　　return alert(a[i].value); 　　　　　} 　　　　} 　　　} 　　} 　</script> 　<body> 　　<input type="button" value="選んだもののvalue値を表示" onclick="RadioTest()" /> 　　<br> 　　<input type="radio" name="Kounyu" value="購入(1)" checked>購入(1)<br> 　　<input type="radio" name="Kounyu" value="購入(2)">購入(2)　　　<br> 　　<input type="radio" name="Kounyu" value="購入(3)">購入(3) 　</body> </html> >>ラジオボタンの値が「undefined」と出てしまいます。 それはラジオボタンのname属性の値がすべて"Kounyu"と同じだからです。 ためしにラジオボタンをひとつにしてみてください。 例えば購入(1)だけにして残りのinputタグを消せばちゃんと表示されるはずです。 これはラジオボタンだけに限った話ではなく、すべてにおいて同様です。 name属性は同じ値が存在するとwindow.[name属性値]ではundefinedになります。 そもそもwindow.[name属性値]という書き方はIEに依った書き方であり、 推奨される書き方ではありません。 現に、window.[name属性値]はFFやNNでは動作しません。（operaは動くようですが‥） また、document.allも同様にIEでしか動かないのでこれも単独での使用はやめた方がいいです。 文書全体のタグを取りたい場合はdocument.getElementsByTagName("*")と、 ワイルドカードを使用する方法もあります。 しかしこれは今度は逆にIEでは動かない（IE7は動くかもしれない）ので、 ブラウザによって分岐させる必要があります。 例えば下記のようにします。 function getAllElements(){ if(!!document.all){return document.all} else{return document.getElementsByTagName("*")} } しかし、ブラウザによってどのタグをrootとして捉えるか微妙に違うため、 indexから配列として使用する場合は注意が必要です。 以上のように、同じhtml文書でもWebブラウザによって動きが大きく変わる場合が多々あります。 私の示した例文はDOMを利用していますが、 これはベンダーに非依存なW3Cという機関が制定しています。 簡単に言えば、どのブラウザでも基本的に同じ手法を用いてhtml文書を操作することができます。 ブラウザは未だベンダー依存するところが数多くありますが、 最近有名なAjaxもレスポンスにXMLを受け取ることができるため、 DOMによる操作が多いに使われていますし、 今後もweb系開発を行うのであればDOMを習得しておく必要はあると思います。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ラジオボタンはループしてチェックをするのが妥当。 たとえばこんな感じでわかりますか？ <script> function getRadioValue(radio){ var value=""; for(var i in radio) value=radio[i].checked?radio[i].value:value; return value; } </script> <form> <input type="radio" name="Kounyu" value="購入(1)" checked>購入(1)<br> <input type="radio" name="Kounyu" value="購入(2)">購入(2)<br> <input type="radio" name="Kounyu" value="購入(3)">購入(3) <input type="button" value="test" onClick="alert(getRadioValue(this.form.Kounyu))"> </form>

jooohn
質問者

お礼

さっそくのご回答有り難うございました。 いただいた方法を導入してみましたが、既存の <input type="button" value="確認画面へ" onClick="kakunin()" name="button"> と <input type="button" value="test" onClick="alert(getRadioValue(this.form.Kounyu))"> をどのように組み合わせたら良いか分かりませんでした。ごめんなさい。。。 あと、前述し忘れていましたが今回はCGIではなく、メールソフトに情報を渡して送信する様にしています。 また、この「購入方法」の項目の前に個人情報を入力する項目があり、 未入力だとalertで「必須項目が入力されていません」と出る様にしています。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ラジオボタンの値を・・・・・

    <html> <head> <script language="javascript"> function osu(){ document.form1.text1.value=document.form1.radio1.value; } </script> </head> <body> <form name="form1"> <input type="radio" name="radio1" value="男" checked>男 <input type="radio" name="radio1" value="女">女 <input type="button" value="押す" onClick="osu()"> <input type="text" name="text1"> </form> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のプログラムは、選択されたラジオボタンの値をテキストボックスに表示させるプログラムなんですが、何故かラジオボタンの値が表示されず、「undefined」というのが表示されます。 どうすれば、「男」または「女」という値を表示させることができますか？ ちなみにこれは、「○○○．ｈｔｍｌ」で保存します

  • 選択したたラジオボタンの値をSUBMITボタンに

    選択したたラジオボタンの値をSUBMITボタンの名前として自動的に替えたいのですが、助言をいただけますか。 イメージは下記です。★の部分に、クリックごとにradioの値を入れたいのです。 <script Language="JavaScript"><!-- function set() { n = document.myFORM.Radio.value; } // --> </script> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onclick="set()" CHECKED> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★"></form>

  • このラジオボタンをチェックした場合、以下の任意のラジオボタンの入力を禁止（disabale）にしたい。

    つまずいております。 ラジオボタンのタグにonClick=""でスクリプトを記述するとチェックそのものができなくなってしまいます。 ラジオボタンをチェックしたときに瞬時に以下のラジオボタンを選択不可能にする場合はどのようにしたらいいのでしょうか？ <!--head内のスクリプト部分--> <script type="text/javascript" language="JavaScript"> <!-- function f0bj(){ document.form1.namae2.disabled; } // --> </script> <body> <input name="namae1" type="radio" onClick="fobj()" value="任意の名前1">任意の名前1 <input name="namae2" type="radio" value="任意の名前2">任意の名前2 </body>

  • ラジオボタンの値

    プログラミング初心者です。ラジオボタンの値を数値として取得して、それを計算に活かしたいのですが、、、うまくいきません。radioChange()で数値を取得したのですが、calcでその変数を使うには以下でおかしいでしょうか？ よろしくおねがいしますm(__)m <html> <body onload="radioChange()"> <SCRIPT LANGUAGE="JavaScript"> function radioChange(num) { xx = num.value; xx = parseInt(xx); } function calc() { radioChange(); document.write(xx * 100); } </SCRIPT> <form name="form1"> <input type="radio" name="radio1" value="1" onclick="radioChange(this)"> <input type="radio" name="radio1" value="2" onclick="radioChange(this)"> <input type="radio" name="radio1" value="3" onclick="radioChange(this)"> </form> </body> </html>

  • ラジオボタンについて

    つまらない質問ですがどうか教えてください。 <form name="myform"> ・ ・ ・ <INPUT TYPE="RADIO" NAME="R1" VALUE="1">関連あり</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="2">関連なし</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="3">不明</INPUT> </form> 上記のようなラジオボタンを作ったのですが、 このラジオボタンのチェックされた値を取得するには document.myForm.cGyoumu.value ではできないのでしょうか？ LOOPさせながらdocument.myForm.elements(i).checked で探さないと取得できないのでしょうか？ 同じフォーム内にラジオボタンが複数あるため、 この方法はあまりやりたくありません。 ほかに方法がありましたら、どうか教えてください。

  • ラジオボタンクリックでサブウインドウを閉じる

    サブウインドウのラジオボタンを押したときに親ウインドウにテキストをインプットしていますが、このとき、自動的にサブウインドウを閉じるにはclose()を使うのかと思いますが、どのように追加したら良いでしょうか。 <INPUT TYPE="radio" NAME="myRB" onClick="window.opener.document.myFORM.address.value='やっほ'">やっほ

  • チェックボックス　とラジオボタンの値取得について

    チェックボックス　とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合　「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は１個ですが、 □が３０個以上　のチェックボックスが５０個くらいあるので、 １回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する　のようにできるのでしょうか？ 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>

  • ラジオボタンでうまくするには・・・・

    初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>１</OPTION> <OPTION value=2>２</OPTION> <OPTION value=3>３</OPTION> <OPTION value=4>４</OPTION> <OPTION value=5>５</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で１・２・３・４・５のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">１袋<BR> <INPUT type="radio" name="name1" value="3900">２袋<BR> <INPUT type="radio" name="name1" value="5800">３袋<BR> <INPUT type="radio" name="name1" value="7500">４袋<BR> <INPUT type="radio" name="name1" value="8500">５袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。

    • ベストアンサー
    • HTML
  • ラジオボタンとonchange

    質問が２つあります。 １、下記が正常に動きません。どこがおかしいのでしょう・・ (^^; ２、下記のような内容で、選択肢が増えた時に、もっと簡単に書く方法が知りたい。 <script Language="JavaScript"><!-- function set() { uriage = document.main.売上.value; omake = document.main.クーポン使用.value; if(document.main.クーポン.value = 1) {document.main.料金.value = uriage ;} else if(document.main.クーポン.value = 2) {document.main.料金.value = uriage-omake ;} } // --> </script> <FORM name="main" ACTION="★" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="売上" SIZE="-1" VALUE="1500"> <INPUT TYPE="HIDDEN" NAME="クーポン使用" SIZE="-1" VALUE="750"> <INPUT TYPE="RADIO" NAME="クーポン" VALUE="1" onChange="set(this)">クーポン使用しない<BR> <INPUT TYPE="RADIO" NAME="クーポン" VALUE="2" onChange="set(this)">使用する<BR> <P> <INPUT TYPE="TEXT" NAME="料金" SIZE="12"> <INPUT TYPE="SUBMIT" NAME="SUBMIT_BUTTON" VALUE="送信"></TD> </form>

  • JavaScriptのラジオボタン選択で値取得

    JavaScriptでフォームのラジオボタン選択で選択した項目に応じて、複数の変数に特定の数値を入れたいのですが、どうしたらいいでしょうか? ラジオボタンで仮に、 ・東京 ・大阪 ・名古屋 という選択があったとして、 (そのボタンの下部に<input type="button" value="Go!" onclick="hogehoge();">というような実行ボタンがあったとします) 東京を選んだ場合は、 a = 4; b = 3; 大阪を選んだ場合は、 a = 3; b = 2; 名古屋を選んだ場合は、 a = 5; b = 4; と、a/bに数値を入れたいです。 今現在下記のように書いたのですが、動作しません。 <script type="text/javascript"> function hogehoge() { no = document.hoge.a.value - 0; if(no == 1) { n1 = 4; n2 = 3; }else if(no == 2) { n1 = 3; n2 = 2; }else if(no == 3) { n1 = 5; n2 = 4; } document.hoge.no1.value = n1; document.hoge.no2.value = n2; } </script> <form name="hoge"> <input type="radio" name="a" value="1" checked>東京 <input type="radio" name="a" value="2">大阪 <input type="radio" name="a" value="3">名古屋 <br> <input type="button" value="Go!" onclick="hogehoge();"><br> <input type="text" size="5" name="no1"><br> <input type="text" size="5" name="no2"> </form> よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する