こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ラジオボタンの値取得

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

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

投稿日時 - 2007-10-16 21:27:56

QNo.3435230

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(2)

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

投稿日時 - 2007-10-19 01:30:01

ANo.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-16 22:18:02

お礼

さっそくのご回答有り難うございました。
いただいた方法を導入してみましたが、既存の
<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:50

あなたにオススメの質問