Web Design Leaves

フォームを送信（submit）すると、 action 属性で指定したファイルが読み込まれ、送信した際の画面の表示位置はリセットされページの先頭が表示されます。

フォームがページの中ほどや後半にある場合で、自分自身（$_SERVER[‘PHP_SELF’]）に送信した際に、送信（submit）した際の表示位置を保持して、ページロード後もスクロール位置を変更しないで表示したいことがあります。

そのためには、Javascript（jQuery）で submit した時の位置情報を取得して、ロード後の画面でその位置に戻すようにします。

以下が概要です。

• フォームにその位置の情報を保持するための隠しフィールド（type = “hidden”）を用意
• 送信する際に、Javascript（jQuery）で submit した時の位置情報を取得
• 取得した位置情報を隠しフィールドの val 属性に設定
• ページがロードされたら、隠しフィールドの val 属性に設定された位置情報を取得
• Javascript（jQuery）で位置を調整

まずは、フォームにその位置の情報を保持するための隠しフィールド（type = “hidden”）を用意します。以下の例では、「name=”scroll_top”」、「class=”st”」としています。

<form action="" method="get" class="form_sample">
<p> 名前: <input type="text" name="name" ></p>
<p>年齢: <input type="text" name="age" ></p>
  <input type="hidden" name="scroll_top" value="" class="st">
  <input type="submit" >
</form>

以下のような Javascript（jQuery）を記述します。

• フォームの submit イベント（$(‘form’).submit())を利用します。
• $(window).scrollTop() で送信された際の位置を取得して変数「scroll_top」に代入します。
• prop() を使って、隠しフィールドの「value」属性に位置の情報をセットします。
• window.onload を使ってロードされた際に、隠しフィールドにセットされた値を取得して、スクロール位置を設定します。
• GET メソッドと POST メソッドの両方の場合に対応するように、値の取得は「$_REQUEST」スーパーグローバル変数を使用しています。
• また、最初は、$_REQUEST[‘scroll_top’]の値は定義されていないので、@ エラー制御演算子を使用しています。

$('form').submit(function(){
  var scroll_top = $(window).scrollTop();  //送信時の位置情報を取得
  $('input.st',this).prop('value',scroll_top);  //隠しフィールドに位置情報を設定
});

window.onload = function(){
  //ロード時に隠しフィールドから取得した値で位置をスクロール
  $(window).scrollTop(<?php echo @$_REQUEST['scroll_top']; ?>);
}

form タグの action 属性

form タグの action 属性が「””」（空）である場合は、自分自身に送信することを意味します。

$_SERVER[‘PHP_SELF’] も自分自身への送信になりますが、$_SERVER[‘PHP_SELF’] を action 属性値として直接 form タグに記述すると XSS 脆弱性となるので、絶対に避けるべきです。「””」（空）にするか、以下のように htmlspecialchars() 関数でエスケープします。

<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8'); ?>"> 

参考にさせていただいたページ：「Javascript：submitした時の位置情報を取得し、ロード時に表示位置を指定する」