フォームに値を渡すには？

[上に] [前に] [次に]
まさや [E-Mail] 2000/03/04(土) 00:56:07
絵４つほど並んでいて「どれがいいですか？」という質問があります。
で、その下に「これ！」というボタンがあって、押すと、アンケート
フォームのセレクスボックスのところにその名前が選ばれている状態
になる…というのがやりたいのですが、値をどうやって渡したらいい
かわかりません。
こういうことってできるんでしょうか？
安芸川晴海 2000/03/05(日) 18:32:11
とりあえずこんな感じでどうでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>絵を選択する</title>
</head>
<body>
<form action="データの送り先">
<select id="sel1">
<option value="img1">画像１</option>
<option value="img2">画像２</option>
<option value="img3">画像３</option>
<option value="img4">画像４</option>
</select>

<fieldset>
<legend>画像１</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<input type="button" onclick="document.forms[0].elements[0].options[0].selected=true;" value="Select Image 1">
</fieldset>

<fieldset>
<legend>画像２</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<input type="button" onclick="document.forms[0].elements[0].options[1].selected=true;" value="Select Image 2">
</fieldset>
<fieldset>
<legend>画像３</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<input type="button" onclick="document.forms[0].elements[0].options[2].selected=true;" value="Select Image 3">
</fieldset>
<fieldset>
<legend>画像４</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<input type="button" onclick="document.forms[0].elements[0].options[3].selected=true;" value="Select Image 4">
</fieldset>
</form>
</body>
</html>

あ、formsやelementsの添え字は適宜変更してくださいね。
あと、私はJavascriptに関しては無知ですので、このJavascriptが規格から見て正当であるかどうかは知らないのですが、とりあえずInternet Explorer 5.0とNetscape Navigator4.6では動作を確認しておりますし、とほほさんのリファレンスによりますと、IE3以降、NN2以降で動作するらしいです。
まさや [E-Mail] 2000/03/06(月) 01:33:26
安芸川晴海様、ありがとうございます。
教えていただいた方法、さっそく試してたんですが、これ、セレクトボックスの
部分だけ別のページにすることは無理でしょうか？
他にもアンケート項目があるので、すごく縦に長いページになってしまって、
かなり見づらい感じなのです。
できたらバラしてすっきりさせてしまいたいんですが、さらに値の渡し方が
わかりません。
すみません。よろしくお願いします。
安芸川晴海 2000/03/06(月) 10:33:42
フレームを使っているのであれば、たしかそんな方法があった気がします。調べてみますが。
そうでないなら、cookieぐらいしか方法を思いつきません。
とりあえず、フレームの使用/不使用をお教えください。
安芸川晴海 2000/03/06(月) 19:33:02
こんな感じでどうでしょう。

frame.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>フレーム利用で絵を選択</title>
</head>
<frameset cols="30%,*">
<frame src="sel.html" name="sel">
<frame src="img.html" name="img">
<noframes>
<body>
<p>フレームに対応していないブラウザをご利用の方は、お手数ですが、<a href="sel.html" accesskey="s">sel.html</a>の選択肢から、下記の画像のうち一つをお選びください</p>
<p>画像１:<img src="画像のURI" alt="なんたらかんたら"></p>
<p>画像２:<img src="画像のURI" alt="なんたらかんたら"></p>
<p>画像３:<img src="画像のURI" alt="なんたらかんたら"></p>
<p>画像４:<img src="画像のURI" alt="なんたらかんたら"></p>
</body>
</noframes>
</frameset>
</html>



img.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>絵を選択する</title>
</head>
<body>
<form action="データの送り先">
<fieldset>
<legend>画像１</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<p><input type="button" onclick="window.parent.frames[0].document.forms[0].sel1.options[0].selected=true;" value="Select Image 1"></p>
</fieldset>
<fieldset>
<legend>画像２</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<p><input type="button" onclick="window.parent.frames[0].document.forms[0].sel1.options[1].selected=true;" value="Select Image 2"></p>
</fieldset>
<fieldset>
<legend>画像３</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<p><input type="button" onclick="window.parent.frames[0].document.forms[0].sel1.options[2].selected=true;" value="Select Image 3"></p>
</fieldset>
<fieldset>
<legend>画像４</legend>
<p><img src="画像のURI" alt="なんたらかんたら"></p>
<p><input type="button" onclick="window.parent.frames[0].document.forms[0].sel1.options[3].selected=true;" value="Select Image 4"></p>
</fieldset>
</form>
</body>
</html>

sel.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>選択肢</title>
</head>
<body>
<form action="送り先">
<fielset>
<legend>画像の選択</legend>
<p><label for="selid1">右のフレーム内の画像の中から、一つをお選びください</label></p>
<p><label for="selid1">フォームに非対応ブラウザの方は、<a href="img.html" accesskey="i">img.html</a>の画像を見て選択してください。</label></p>
<p>
<select id="selid1" name="sel1">
<option value="img1">画像１</option>
<option value="img2">画像２</option>
<option value="img3">画像３</option>
<option value="img4">画像４</option>
</select>
</p>
</fieldset>
</form>
</body>
</html>

img.htmlの記述で、forms[0]の下が、elements[x]でなく、sel1となっているのは、Internet Explorerはlegend要素をelementに数えているらしいのに対し、Netscape Navigatorは数えていないらしいからです。統一感がなくてすみません。

前のソースと同様、これが正しいのかどうかは知りません。
とりあえず、Internet Explorer 5.0、Netscape Navigator 4.6、HotJava 3.0、JustView 3.01Uでは動作しました。
ただ、JustViewは、どういうわけか分かりませんが、初回のクリックではエラーを表示し、２回目以降は期待通りに動作するというわけの分からない反応を示しました。
安芸川晴海 2000/03/06(月) 19:53:15
ごめんなさい。
上のsel.htmlのソースの10行目、<fielset>は<fieldset>の間違いです。
まさや [E-Mail] 2000/03/08(水) 01:23:01
[[解決]]
作っていただいたソースを２日ほどいじりまわして、やっとなんとか
フレームによけた値を、新しく読み込んだページに反映するところ
までできました。
何度もありがとうございました。
[上に] [前に] [次に]