締切済み

ラジオボタンの値取得

2007/10/16 21:27

お世話になります。今回のHTML作成が初めてとなります。今回メールフォームの作成をしていて、流れとしては「フォーム」⇒「確認画面」⇒「メール送信」という風に作っています。テキストについてはフォームからメールまで値が伝わるように出来たのですが、ラジオボタンの値だけが確認画面に伝わりません。 ■メールフォーム <script language="JavaScript">  </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">  </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」と出てしまいます。ココのサイトに同じような質問がありましたが、内容が今回挙げたものと異なっていたので改めて質問させていただきました。宜しくお願いします。

jooohn
お礼率50% (1/2)

JavaScript
回答数2
ありがとう数5

みんなの回答 （2）
専門家の回答

みんなの回答

OKbokuzyo
ベストアンサー率43% (130/296)

2007/10/19 01:30 回答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)

2007/10/16 22:18 回答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>

質問者

お礼 2007/10/17 11:16

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

ログインすると、全ての回答が全文表示されます。