http://www.openspc2.org/reibun/javascript/form/005/index.html このページに載っているJavascriptのサンプルで、性別・年齢・趣味の順で表示されるのですが、性別・趣味・年齢の順で表示させることはできるのでしょうか?(ラジオボタン型→セレクトボックス型→ラジオボタン型のようにしたいのですが、配置を変えると「〜は宣言されていません」とエラーが出てしまいます)。答えそのもの、もしくは解説サイトのリンクをお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/07/19 00:02:07
  • 終了:--

回答(4件)

id:aki73ix No.1

aki73ix回答回数5224ベストアンサー獲得回数272004/07/19 00:22:55

ポイント5pt

http://tohoho.wakusei.ne.jp/

惑星・専用レンタルサーバー

多分

</select><br>を上にコピーし忘れたのでしょう

-------------

<html>

<head>

<title>フォーム内容をサブウィンドウに表示する(複数のラジオボタンを含む場合)</title>

<script Language="JavaScript"><!--

function outData()

{

fOBJ = document.myFORM;

fName = fOBJ.yourName.value;

for (i=1; i<4; i++) if (fOBJ.elements[i].checked) fSex = fOBJ.elements[i].value;

for (i=4; i<9; i++) if (fOBJ.elements[i].checked) fAge = fOBJ.elements[i].value;

sNum = fOBJ.sel.selectedIndex;

fType = fOBJ.sel.options[sNum].value;

subWin = window.open("about:blank","form_data","width=320,height=240");

subWin.document.open();

subWin.document.write("名前:"+fName+"<br>");

subWin.document.write("性別:"+fSex+"<br>");

subWin.document.write("趣味:"+fType+"<br>");

subWin.document.write("年齢:"+fAge+"<br>");

subWin.document.close();

}

// --></script>

</head>

<body>

<form name="myFORM">

名前:<input type="text" name="yourName"><br>

性別:<input type="radio" name="seibetsu" value="男" CHECKED>男<br>

   <input type="radio" name="seibetsu" value="女">女<br>

   <input type="radio" name="seibetsu" value="不明">不明<br>

趣味:

<select name="sel">

<option value="釣り">釣り

<option value="プログラミング">プログラミング

<option value="昼寝">昼寝

<option value="その他">その他

</select><br>

年齢:<input type="radio" name="age" value="10代" CHECKED>10代<br>

   <input type="radio" name="age" value="20代" CHECKED>20代<br>

   <input type="radio" name="age" value="30代" CHECKED>30代<br>

   <input type="radio" name="age" value="40代" CHECKED>40代<br>

   <input type="radio" name="age" value="50代以上" CHECKED>50代以上<br>

<input type="button" value="送信内容表示" onClick="outData()">

</form>

</body>

</html>

id:junpei0219

ご回答ありがとうございます。

</select>は抜けておりませんで、記載してもらったソースを試してみましたが、やはりエラーがでます。(環境:IE6.0+SP1、エラーメッセージ:fAgeは宣言されていません)

2004/07/19 00:53:16
id:html1983 No.2

html1983回答回数72ベストアンサー獲得回数02004/07/19 00:23:23

ポイント100pt

↑なるべく変更箇所の少ない答えを作っときました。(質問終了後に消去します)

エラーの原因はJavaScriptでエレメント(ここでいうinput〜やselect)をフォーム要素の何番目かで探しにいっているためです。

それぞれのエレメントにidつけてgetElementByIdで参照すれば、順番なんて気にしなくていいんですけどね。

id:junpei0219

おおお 完璧です!

何番目かで探しに行かれると、選択肢を後で変更する時不便ですよね・・・。getElementByIdを勉強してみます。

ありがとうございました!

2004/07/19 01:07:07
id:TakamiChie No.3

高見知英回答回数59ベストアンサー獲得回数02004/07/19 01:02:00

ポイント5pt

http://tohoho.wakusei.ne.jp/www.htm

惑星・専用サーバーサービス/ホスティング

 とりあえず有名な杜甫々さんのサイトですが。

 さて、HTMLでは、各項目に名前をつけてるのに、forループを使って参照しているのが原因でしょう。

あの部分を消して、

fSex = fOBJ.seibetsu.options[fOBJ.seibetsu.selectedIndex].value:

fAge = fOBJ.age.options[fOBJ.age.selectedIndex].value:

 でいいんじゃないでしょうか?

(最近JavaScript触ってないから、良く覚えてませんが(^^ゞ)

id:junpei0219

ご回答ありがとうございます。

試してみましたが、動きませんでしたTT

:→;に直してみたのですが、それでもダメで・・。こちらのほうがすっきりしていてよさそうなので、どこを直せばよいのか引き続きお願いいたしますm(__)m

2004/07/19 01:19:03
id:aki73ix No.4

aki73ix回答回数5224ベストアンサー獲得回数272004/07/19 01:54:35

すみません、うちのブラウザでエラーが出なかったので勘違いしました

もう少し綺麗にまとめてみました

---------------

<html>

<head>

<title>フォーム内容をサブウィンドウに表示する(複数のラジオボタンを含む場合)</title>

<script Language="JavaScript">

<!--

var fAge ="不明";

var fSex ="不明";

function outData()

{

fOBJ = document.myFORM;

fName = fOBJ.yourName.value;

sNum = fOBJ.sel.selectedIndex;

fType = fOBJ.sel.options[sNum].value;

subWin = window.open("about:blank","form_data","width=320,height=240");

subWin.document.open();

subWin.document.write("名前:"+fName+"<br>");

subWin.document.write("性別:"+fSex+"<br>");

subWin.document.write("趣味:"+fType+"<br>");

subWin.document.write("年齢:"+fAge+"<br>");

subWin.document.close();

}

// -->

</script>

</head>

<body>

<form name="myFORM">

名前:<input type="text" name="yourName"><br>

性別:<input type="radio" name="seibetsu" onClick=’fSex="男";’>男<br>

   <input type="radio" name="seibetsu" onClick=’fSex="女";’>女<br>

趣味:

<select name="sel">

<option value="釣り">釣り

<option value="プログラミング">プログラミング

<option value="昼寝">昼寝

<option value="その他">その他

</select><br>

年齢:<input type="radio" name="age" onClick=’fAge="10代";’>10代<br>

   <input type="radio" name="age" onClick=’fAge="20代";’>20代<br>

   <input type="radio" name="age" onClick=’fAge="30代";’>30代<br>

   <input type="radio" name="age" onClick=’fAge="40代";’>40代<br>

   <input type="radio" name="age" onClick=’fAge="50代以上";’>50代以上<br>

<input type="button" value="送信内容表示" onClick="outData()">

</form>

</body>

</html>

id:junpei0219

残念ながら私の環境ではうまく動きませんでした。ラジオボタンでどれを選択しても「不明」と返されます。

aki73ixさんの環境では動作している(?)ようですので、よろしければブラウザ及びver.をいわしに書き込みお願いできますでしょうか。

>>全回答者の皆様

ありがとうございました。

2004/07/19 02:14:30
  • id:aki73ix
    (投稿者削除)

  • id:aki73ix
    Re:えっと

    Windows2000にて
    IE5.01SP4
    Mozilla 1.7.1
    Netscape4.8
    どれも問題ないようです
    http://nifberry.727.net/test/hatena33.htm
  • id:TakamiChie
    忘れてしまってました。

     やっぱり忘れてしまってましたね。ごめんなさい。
    誤).
    for (i=1; i<4; i++) if (fOBJ.elements[i].checked) fSex = fOBJ.elements[i].value;
    for (i=4; i<9; i++) if (fOBJ.elements[i].checked) fAge = fOBJ.elements[i].value;
    正).
    for (i=0;i<fOBJ.seibetsu.length;i++) {
    if(fOBJ.seibetsu[i].checked) fSex = fOBJ.seibetsu[i].value;
    }
    for (i=0;i<fOBJ.age.length;i++) {
    if(fOBJ.age[i].checked) fAge = fOBJ.age[i].value;
    }
    です。ラジオボタンはループしなきゃ分からないんですね。面倒だなあ。

    年齢のボタン数が違おうが、性別のボタン数が違おうが問題はありません。

     ところでinput type=”radio” name=”age”にcheckedがついたラジオボタンが複数ありますね。

    http://homepage2.nifty.com/BASH/WWW/JavaScript/
  • id:aki73ix
    (投稿者削除)

  • id:junpei0219
    Re(2):えっと

    当方でもNetscape7.0で試してみましたが、やはりダメでした。
    Takamichieさんの方法でやってみることにします。

    書き込みありがとうございました。
  • id:junpei0219
    Re:忘れてしまってました。

    ソースを試してみたところ、正常に動作しました!
    しかもボタン数変えても、行を変えても動くなんて・・・。
    すばらしすぎます。

    この方法で作っていきたいと思います。

    お礼としてポイントを送信させていただきましたので、ご確認くださいませ。
    本当にありがとうございました!
  • id:aki73ix
    Re(3):えっと

    >当方でもNetscape7.0で試してみましたが、やはりダメでした。

    上のレスのソース直接でも駄目ですか?
    多分コピーならばミスだと思うんですが
  • id:TakamiChie
    Re(2):忘れてしまってました。

    >お礼としてポイントを送信させていただきましたので、ご確認くださいませ。
     あ、とどいてます。ありがたくいただきますm(__)m
  • id:aki73ix
    (-へ-)んー

    Radio TYPEでもforループはいらないはずなのですが(^-^;
    上のリンクのソース、よかったら参考にして見てみてくださいな
  • id:moochin2004
    Re:(-へ-)んー

    気になったので、私もaki73ixさんのソースでいくつか試させていただきましたが、少なくとも以下の環境でもちゃんと動作しました。
    WinXP(IE6.0)
    WinNT4(IE5.5SP1)
    Win95(IE5.5SP2)
    Win以外のOSで駄目だったのでしょうかね?
  • id:TakamiChie
    Re:(-へ-)んー

     わたしもためしてみましたが――。

     onClickが全角シングルクオーテーションで囲まれてますね、これでは動きません。
    そこだけ訂正すればちゃんと使えますから(Opera7.52 WinXP)、転写中に何か問題があったのでしょう。

    >Radio TYPEでもforループはいらないはずなのですが(^-^;
    >上のリンクのソース、よかったら参考にして見てみてくださいな
     確かに、onClickを使えば不要になります。
    ただ、スクリプトやソースコードの類は、一所にまとめておいた方がわかりやすいのではないかと思いましたので。処理するコードの数も減りますし。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません