submitを行いページしたの元の位置に戻りたい

Question

送信ボタンを押してページトップに戻ってしまうのを、ページ下にあるフォームに戻りたい。

サイトで下記のコードを見つけてJavaScriptに貼り付けたが(<?php echo @$_REQUEST['scroll_top']; ?>)がVSコードでエラーの波線が出て使えない。

<input type="hidden" name="scroll_top" value="" class="st">に送信した場所を記憶させて、そこの値を呼び出すなどイメージはわかったのですが、実際にするとできません。

ご教授お願いできないでしょうか？

$('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']; ?>);
  }

window.onload = function()の下記にある(<?php echo @$_REQUEST['scroll_top']; ?>)が波線が出ます。

Answer 1

• ハッシュをつけてformのactionに指定するか
• サブミットで遷移せずxhrやfetchで非同期処理する

のが賢明です

サブミット時にcookieにスクロール位置を入れて
ロード時にスクロールをするということもないことはないですが
あまり効率的ではありません

参考

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('form').addEventListener('submit',e=>{
    e.preventDefault();
    fetch('api.php',{method:'post',body:new FormData(e.target)}).then(res=>res.text()).then(console.log);
  });
});
</script>
<form method="post">
<input type="text" name="hoge" value="123">
<input type="submit" value="send">
</form>

Comments

[yu.miura]

回答有難うございます。
もしよろしければ、１番おすすめの例などをコードで提示いただけないでしょうか？

[yambejp]

自分自身に飛ぶのが前提でしたから基本CORSに引っかからないということでよいですか？
サブミットする際に値は渡すのでしょうか？
formのsubmit処理を殺してfetch(自分,option)すれば良いでしょう。
あとは何を渡して、どう処理したいかによります

[yu.miura]

submitした際にPOSTで同じページに飛ばして、エラーチェックを行います。エラーがなければ確認画面に行き、ある場合はエラーを出します。
エラーを出す際にTOPに戻るので、それをフォームの位置にさせたいです。
アドバイスございましたら、よろしくお願いいたします。

[yambejp]

fetchでapiに飛ばす簡単なsampleあげておきました。
apiでチェックして戻り値をみてformをsubmitするか決めればいいでしょう

[yu.miura]

返信が遅くなり、申し訳ございません。
ご丁寧にサンプルありがとうございます！
確認してみます。

Answer 2

.jsファイル内ではPHP動きません。
PHPタグで囲ったらPHPが動作するわけではなく、原則としてあくまで.phpファイル内にてPHPタグが正しく解釈されます。

また「送信を押すとトップに戻ってしまう」というのは間違った認識で、form送信はaction属性の指定先に送信するので、「戻る」のではなく「リクエスト先の画面が表示される」という認識が正しいです。

画面にとどまりたいのでしたら、Ajaxなどで非同期でサーバーサイドの処理をさせるのが自然になると思います。
入力内容を初期状態にしたいのでしたらJavascriptから操作する必要がありますけどね。

Comments

[yu.miura]

そうなのですね、勉強になります！
PHPページにスクリプトタグで囲むと、できるようになったかもしれません。

[m.ts10806]

JavaScriptに直接リクエストを出力するのもセキュリティリスクがあります。

[yu.miura]

どのような対応が一番ベターなのでしょうか？
もしよろしければ、例を紹介いただけないでしょうか？

[m.ts10806]

回答内にキーワード入れてますがそれではなんのヒントにもなりませんか？

[yu.miura]

ありがとうございます。
行ってみます。