たとえば「日比谷会場」というボタンをクリックすると次のページのフォーム内のプルダウンが「日比谷会場」となり、

「日比谷会場」のボタンと同じページ内の「渋谷会場」というボタンをクリックすると次のページのフォーム内のプルダウンが「渋谷会場」という風に、
ボタンをクリックすることによって次のページのプルダウンを変化させる仕組みを作るにはどのようにしたら良いのでしょうか?
ボタンがあるページと、フォームのあるページは別のものとなります。

よろしくお願いします。

回答の条件
  • 1人20回まで
  • 登録:2006/06/07 14:45:20
  • 終了:2006/06/12 10:38:27

回答(4件)

id:yoneto164 No.1

ヨネちゃん回答回数813ベストアンサー獲得回数942006/06/07 16:01:06

ポイント50pt

当たり前のことではありますが「日比谷会場」と「渋谷会場」で、リンクするページ(フォーム)を別にしておくというのが簡単な方法かと思います。

id:signmaster

すいません。書き忘れてしまいました。

フォームページは1つだけが条件となります。

2006/06/07 16:59:43
id:yoneto164 No.2

ヨネちゃん回答回数813ベストアンサー獲得回数942006/06/07 18:45:08

ポイント20pt

http://let.sub.jp/test/form01/

↑おそらくこういうことかと思われます。

方法はいくつかありますが、ドロップダウンの表示するページをPHPにできるなら、

<?php if($_POST['place']==hibiya){?>

<form name="form1" method="post" action="">

<select name="select">

<option value="">選択してください</option>

<option value="hibiya">日比谷会場</option>

</select>

</form>

<?php }if($_POST['place']==shibuya){?>

<form name="form1" method="post" action="">

<select name="select">

<option value="">選択してください</option>

<option value="shibuya">渋谷会場</option>

</select>

</form>

<?php }?>

というようにすることで可能になります。

他にもCGIを使う方法や、変数をクエリで飛ばす方法、ジャバスクリプトを使う方法等があります。

id:signmaster

ありがとうございます。

確かにこういったことになります。

実際は飛んだ先はその会場名が表示されているようにしたいので、

<optino value="shibuya" SELECTED>

のようにすると思います。

JavaScriptの方法をご存知でしたら、そちらも教えてもらえないでしょうか?

2006/06/07 19:39:15
id:yoneto164 No.3

ヨネちゃん回答回数813ベストアンサー獲得回数942006/06/07 22:18:11

ポイント50pt

SELECTEDを入れる場所を変えるということですね。理解できたような気がします。おそらく、

http://let.sub.jp/test/form02/

<form name="form1" method="post" action="">

<select name="select">

<option value="">選択してください</option>

<option value="hibiya"<?php if($_POST['place']=="hibiya"){echo " selected";}?>>日比谷会場</option>

<option value="shibuya"<?php if($_POST['place']=="shibuya"){echo " selected";}?>>渋谷会場</option>

</select>

</form>

のような感じで良いのでしょうか。

JavaScriptの場合は

http://let.sub.jp/test/form03/

のような方法で可能です。ただし、ブラウザ側でJavaScriptを無効にしているユーザーに対してはSELECTEDも挿入されません。

id:backupper No.4

backupper回答回数95ベストアンサー獲得回数102006/06/09 19:50:18

ポイント50pt

より汎用性を持たせると以下のような感じでしょうか。

<html>
<head>
<title>会場選択</title>
<script type="text/javascript">
window.onload = function () {
  idx = 0;
  p = new Array;
  v = new Array;
  p = window.location.search.substring(1).split('&');
  for (var i=0; i<p.length; i++) {
	  v = p[i].split('=');
	  if (v[0] == 'hall') {
			idx = v[1];
		  break;
		}
  }
  if (document.forms['f1'].elements['hall'].options.length-1 < idx) {
	  idx = 0;
  }
  document.forms['f1'].elements['hall'].options[idx].selected = true
}
</script>
</head>
<body>
<form name="f1">
<select name="hall">
<option value="">会場選択</option>
<option value="hibiya">日比谷会場</option>
<option value="shibuya">渋谷会場</option>
</select>
</form>
</body>
</html>

QUERY_STRINGに?hall=1で日比谷、?hall=2で渋谷という感じです。

リンクでアクセスしたいの場合

<a href="http://*/form.html?hall=1">日比谷会場</a>

フォームのボタンでアクセスしたい場合

<form method="get" action="http://*/form.html">
<input type="hidden" value="2" />
<input type="submit" value="渋谷会場" />
</form>

会場を増やしたい場合は、formのoptionを増やし、それに併せてアクセスするリンクの?hall=数字の数字部分を増やしてください。

id:signmaster

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

大変わかりやすい内容でした。

参考にさせていただきます。

2006/06/12 10:37:43
  • id:backupper
    4です。
    フォームのボタンでアクセスしたい場合のnameアトリビュートが抜けてました。
    >||
    <form method="get" action="http://*/form.html">
    <input type="hidden" name="hall" value="2" />
    <input type="submit" value="渋谷会場" />
    </form>
    ||<
    正しくは、こうでした。すいません。

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

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

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

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