WordPressで画面還移なしの掲示板を作成する方法が分かりませんアドバイスお願い致します。

Q&A掲示板を画面還移する形で作成していたのですが、質問画面を作成後の回答画面作成中に入力→確認→サーバーに送信する機能を還移なしで行う形にしたいと考え作り直しております。

回答画面の入力画面の送信ボタンを押した際に入力フォームを非表示にして、確認画面を表示させて非同期通信を行いサーバーに送信させることは可能でしょうか？
入力→確認と確認→サーバーに送信で2度非同期通信が必要になるのではないかと懸念しております。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2023/10/19 17:39

画面内に、回答の入力フォームを追加 (<form> 要素)

入力フォーム内の "確認" ボタンが押されたら (submit イベント)
→ 入力フォームを非表示 (CSS display などを使用)
→ 画面内に、回答の確認フォームを追加
→ 入力フォームから確認したい内容を確認フォームに書き込み
(ここで非同期 GET 送信して正常性確認した結果も書くと親切)

確認フォーム内の "戻る" ボタンが押されたら
→ 入力フォームを表示
→ 確認フォームを削除

確認フォーム内の "送信" ボタンが押されたら (submit イベント)
→ 入力フォーム内容を非同期で POST 送信 (Fetch API などを使用)
→ 送信成功なら、
→→ 入力フォームと確認フォームを消去
→→ 画面内に、送信済の回答文ブロックを追加 (<section> 要素など)
→→ 画面内に、新たな回答の入力フォームを追加
→ 送信失敗なら、
→→ 画面内に、失敗した旨のお詫びブロックを追加

参考)
https://developer.mozilla.org/ja/docs/Web/API/HT …
https://developer.mozilla.org/ja/docs/Web/CSS/di …
https://developer.mozilla.org/ja/docs/Web/API/Fe …

この回答へのお礼

回答ありがとうございます。
アドバイス頂いたように組んでみたのですが、意図が分からずどのように実装すれば良いかアドバイスお願い致します。
非同期 GET 送信して正常性確認した結果も書く ← これは何をすれば良いのでしょうか？
sample.php が最新コードになります。

※アドバイス頂きたい内容
→ 画面内に、回答の確認フォームを追加
→ 入力フォームから確認したい内容を確認フォームに書き込み
(ここで非同期 GET 送信して正常性確認した結果も書くと親切)

※最新コード
https://wandbox.org/permlink/LNuot040YUwMX0dP

お礼日時：2023/10/22 22:48