ラジオボタンの値取得

締切済

質問者：jooohn
質問日時：2007/10/16 21:27
回答数：2件

お世話になります。
今回の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」と出てしまいます。

ココのサイトに同じような質問がありましたが、
内容が今回挙げたものと異なっていたので
改めて質問させていただきました。
宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： OKbokuzyo
回答日時：2007/10/19 01:30

細かい部分が見えないからあくまで一例で紹介します。

<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を習得しておく必要はあると思います。

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2007/10/16 22:18

ラジオボタンはループしてチェックをするのが妥当。

たとえばこんな感じでわかりますか？

<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>

- 0
- 件

通報する

この回答へのお礼

さっそくのご回答有り難うございました。
いただいた方法を導入してみましたが、既存の
<input type="button" value="確認画面へ" onClick="kakunin()" name="button">
と
<input type="button" value="test" onClick="alert(getRadioValue(this.form.Kounyu))">
をどのように組み合わせたら良いか分かりませんでした。ごめんなさい。。。

あと、前述し忘れていましたが今回はCGIではなく、メールソフトに情報を渡して送信する様にしています。
また、この「購入方法」の項目の前に個人情報を入力する項目があり、
未入力だとalertで「必須項目が入力されていません」と出る様にしています。

通報する

お礼日時：2007/10/17 11:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！