- 締切済み
ラジオボタンの値取得
お世話になります。 今回の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」と出てしまいます。 ココのサイトに同じような質問がありましたが、 内容が今回挙げたものと異なっていたので 改めて質問させていただきました。 宜しくお願いします。
- jooohn
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- OKbokuzyo
- ベストアンサー率43% (130/296)
細かい部分が見えないからあくまで一例で紹介します。 <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)
ラジオボタンはループしてチェックをするのが妥当。 たとえばこんな感じでわかりますか？ <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>
お礼
さっそくのご回答有り難うございました。 いただいた方法を導入してみましたが、既存の <input type="button" value="確認画面へ" onClick="kakunin()" name="button"> と <input type="button" value="test" onClick="alert(getRadioValue(this.form.Kounyu))"> をどのように組み合わせたら良いか分かりませんでした。ごめんなさい。。。 あと、前述し忘れていましたが今回はCGIではなく、メールソフトに情報を渡して送信する様にしています。 また、この「購入方法」の項目の前に個人情報を入力する項目があり、 未入力だとalertで「必須項目が入力されていません」と出る様にしています。