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

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

よろしくお願いします。

●質問者: hiro
●カテゴリ:インターネット ウェブ制作
✍キーワード:クリック ボタン 日比谷 渋谷
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● ヨネちゃん
●50ポイント

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

◎質問者からの返答

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

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


2 ● ヨネちゃん
●20ポイント

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を使う方法や、変数をクエリで飛ばす方法、ジャバスクリプトを使う方法等があります。

◎質問者からの返答

ありがとうございます。

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

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

<optino value="shibuya" SELECTED>

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

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


3 ● ヨネちゃん
●50ポイント

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も挿入されません。


4 ● backupper
●50ポイント

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

<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=数字の数字部分を増やしてください。

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



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