html メッセージ出力後にsubmitする方法？

質問

質問タイトルの文字数制約のため、わかりにくい表現になってしまいましたが、実現したい事は下記です。

(1) input.html で、検索条件の入力フォームを作り、入力が完了したら「検索開始」ボタンで、実際に検索処理をする search.php に遷移する。
　　私の場合は、下記で実現している。

　　　　<form method="POST" action="search.php"
　　　　<input type="submit" value="検索開始"

(2) しかし、検索処理の内容が重たい時（検索件数が多い or 検索条件が複雑等々）、「検索開始」ボタンを押してから結果が表示されるまで時間がかかりその間は画面表示に変化が無いため、その間に例えば「ただいま検索を開始しました。」というようなメッセージを表示させたい。

(3) 試しに、serach.php のトップに
　　　　echo "ただいま検索を開始しました。";
　を記載しても、（私には理由がわかりませんが）上記メッセージは search.php 側で検索処理が終わってから表示されてしまう。

(4) そこで、input.html 側で、search.php に遷移する前に、上記のようなメッセ－ジを出力したいが、その方法が良くわからない。

Web 設計に詳しい方より、簡単に実現できる方法をご教示頂きたく、よろしくお願いいたします。

回答No.1

t_ohta · ベストアンサー

<form>タグのactionで遷移先のURLを記載すると、ブラウザは本例だと search.php にリクエストデータを送信し応答を待ちます。
この時ブラウザは search.php から応答データが届くまで待ち続けるので何も反応しません。

search.php に「echo "ただいま検索を開始しました。"; 」と記述しても、その後の処理も含めて全ての処理が終わるまでサーバからブラウザに応答データを返すことはないので、処理が終わってから「ただいま検索を開始しました。」とブラウザに表示されてしまいます。

解決方法としては、一つはJavaScriptを使いinput.htmlからの検索クエリー送信を行うようにし、送信前にJavaScriptで画面を書き換えて「ただいま検索を開始しました。」を表示しておき、応答を受け取ったらJavaScriptで再度画面を書き換えるような動作にする方法。
もう一つは<form>タグのaction先はクエリーを受け付けるだけにして、すぐさま「ただいま検索を開始しました。」と表示するHTMLを返し、そのページから結果表示ページへリダイレクトで遷移（<meta>タグやJavaScriptで遅延実行）させるようにし、PHPのセッション機能を使って検索クエリーを結果表示ページに引き継いでおいて検索を実行すると言う方法が考えられます。

補足

早速のレスポンス、ありがとうございました。
php の先頭に echo 文を記載しても効果が無い理由が良くわかりました。

＞もう一つは<form>タグのaction先はクエリーを受け付けるだけにして、すぐさま「ただいま検索を開始しました。」と表示するHTMLを返し、そのページから結果表示ページへリダイレクトで遷移（<meta>タグやJavaScriptで遅延実行）させるようにし、PHPのセッション機能を使って検索クエリーを結果表示ページに引き継いでおいて検索を実行すると言う方法が考えられます。

私は、Javascript はほとんど経験がないので上記の方法でチャレンジ中で、コメント頂いたように、とりあえず「ただいま検索を開始しました。」と表示するHTML（仮に input2.html と称します。）を作り、まずはそこにへ遷移させたのですが、ここにどういう処理を記載したら良いのか良くわからず悩んでいました。（input2.html の中に、検索する処理を担当する php コードを埋め込んでもダメでした。）

もし可能でしたら、今回の様な事を実現しているサンプルコードが記載されているネット情報がありましたら、ご教示頂けないでしょうか？　厚かましいお願いになるかと思いますが、ご検討のほど、よろしくお願いいたします。

回答No.3

retorofan

希望
・input.html 側で、search.php に遷移する前に、
　上記のようなメッセ－ジを出力したい

回答例
<script type='module'>
document.querySelector('input[type="submit"]').addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
};
</script>

記述場所は、head, body問わず、どこでもいいですよ！

補足

早速のレスポンスありがとうございました。

しかし、
<script type='module'>
document.querySelector('input[type="submit"]').addEventListener('click', (e) => {
e.preventDefault();
alert('ただいま検索を開始しました');
};
</script>

を、私の環境で、input.html のいろいろな箇所に入れて試してみましたが、表示は出なかったので、何か条件が不足しているのかもしれません。
それとも、私の方でまだ見落としがあるでしょうか？

正直なところ、私は、html ,css ,js といったクライアント側言語のノウハウをあまり有しておらず、ご提示いただいたスクリプトを完全に理解できていません。　表示されるとしたら、PC画面のどのあたりでしょうか？

以上、よろしくお願いいたします。　

ちなみに私の環境は、以下のようになっています。

クライアントPC側：
　Windows10 Pro 64 ビット
　ブラウザは Google Chrome
html はホームページビルダー22 ＋ 細かいところは テキストエディター　Mifes11　を使って作成。

サーバー側：　（データベースのデータがあるところ。）
　自宅の Linux サーバーで、Centos8 準拠の 国産の Miracle Linux 8.6 を使ったもの。

　　Apache2 httpd-2.4.39
PHP Ver 7.4.6
　　MySQL Ver 8.0.30 （データベース）

回答No.2

AsarKingChang

＃１さんの意見に同意

なので、Submitで、インナーを書き換えて表示物を増やしつつ、
レスポンスを待つか、

もう一つはXHR（AJAX）でその画面のままで検索を行い
検索結果をDOM構築でしょうね。
（画面はそのままで追加で検索結果を得るようにして
　それを表示）
このやり方は、ブラウザはリロードされていないので、
表示物を色々つけてもOKというメリットありですね。