人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: junpei0219
●カテゴリ:コンピュータ 学習・教育
✍キーワード:JavaScript エラー サイト セレクト ボックス
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● aki73ix
●5ポイント

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>

◎質問者からの返答

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

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


2 ● html1983
●100ポイント

http://www.geocities.jp/html/jstest.html

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

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

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

◎質問者からの返答

おおお 完璧です!

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

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


3 ● 高見知英
●5ポイント

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触ってないから、良く覚えてませんが(^^ゞ)

◎質問者からの返答

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

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

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


4 ● aki73ix
●0ポイント

http://localhost/

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

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

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

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

◎質問者からの返答

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

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

>>全回答者の皆様

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ