formで同じページに変数を受け渡す場合、#までキャリーされてしまう問題

phpで、apiを組んでいる時など、同じページにユーザー入力の変数を渡したいときってありますよね。っで、自分で書いていてちょっと引っかかったことがありましたので、備忘録として記事にしておきます。


google広告

同じページで結果を表示させる

以下のような感じで、phpのプログラムを書いたんです。本当は、$_GET[“age”]などとgetの要素がhead部分に入りますが省略しています。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
</html>
<body>
<p>
<form action="" method="get">
<select name="sex">
<option value="male">男性</option>
<option value="female">女性</option>
</select> 
<select name="age">
<option value="1">20代</option>
<option value="2">30代</option>
</select> 
<input type="submit" value="この条件で検索" />
</form>
</p>

<hr>
<h3>おすすめ観光スポットリスト</h3>
<p>
<ol>
<li><a href="#disney">ディズニーランド</a></li>
<li><a href="#mother">マザー牧場</a></li>
<li><a href="#universal">ユニバーサルスタジオ</a></li>
</ol>
</p>

<h3 id="disney">ディズニーランド</h3>
<p>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
ディズニーランドの説明<br>
</p>

<h3 id="mother">マザー牧場</h3>
<p>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
マザー牧場の説明<br>
</p>

<h3 id="universal">ユニバーサルスタジオ</h3>
<p>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
ユニバーサルスタジオの説明<br>
</p>
</body>

これをsample01.phpとして表示させたのが、以下の感じ。(かなりヘンテコな例ですが、堪忍してください)「おすすめ観光スポットリスト」のところにページ内リンクをかけていて、スポットにページ内ジャンプするようになっています。

sample01

ユーザーの方が、さまざまな観光スポットの説明を読んで、自分に合う条件(一番上のformから)を入力してapiをたたくと、また違ったスポットが表示されるという仕組みです。

一見これで良さそうですが、このままだと問題があります。ユニバーサルスタジオの説明をページ内リンクで飛んだユーザーの方が、別条件で施設を検索したいと思った時、ページを上にスクロールして、条件を入力しなおしてボタンを押すと

http://wpblogdiy.com/sample/sample01.php?sex=male&age=1#universal

urlがこのようになって、性別、年齢の情報のほかに#のページ内リンクの情報もキャリーしてしまうんです。検索したページにユニバーサルスタジオがあれば、いきなりそこに飛ぶのでユーザーの方はびっくりされてしまいます

解決策は簡単

この問題の解決策は簡単。formのaction=””の部分に、同じファイル名を記載すればいいです。この場合はaction=”sample01.php”と記載すれば、変数のみがキャリーされるようになります。これって常識なんでしょうか? 管理人は、これでかなり長い時間悩みましたので、忘れないためにもメモしておきます。

google広告

コメントを残す

*

このページの先頭へ