質問: 上記みたいなイメージで、最初はセクション1しか表示されておらず、 「次へ」をクリックすると、ページ遷移させずに、 セクション2の質問が表示されるようにしたいです。
回答: やり方はたくさんあります。 ただ、それは「どのようにデータを持ちたいか・持たせたいか」「どのように見せたいか」にもよります。 その部分は仕様なので考えていただきたい部分です。 「Googleフォームのような」というと、セクションと項目は固定ではなく**動的**になります。 動的になるということは、データベースに情報を持つのが最も一般的と思います。 つまりまずやるべきは作りたい機能に必要なデータの体系を考えること。 どのようにデータを持てば動的にセクションと項目を持つようににできるか。 「1対多」「多対多」などデータの関連性の持ち方を習得する必要があります。 ここは「マスタ」と呼ばれるデータの呼び方になります。 また、実際に入力された情報を格納するデータも必要になるかもしれませんね。 まあ送りっぱなしなのであればそれも不要かもしれませんが、履歴として残したいのであればそれも保存する必要がありますね。 要件によって適宜データの持ち方を考えてください。 というところはあくまで「裏側」のことです。 データの持ち方が決まればあとは表の話ですので別々に作ることも出来ます。 (実際現場ではモックという形で静的htmlで画面イメージとクライアント側の動作イメージを作ります) 「ページ遷移」って結構曖昧な概念だったりします。 それによって実現方法がたくさん考えられるわけです。 ひとつめ。 phpとのことで、フォーム送信のことはある程度理解されている前提で書きますが、 form送信する場合に「自身に対してPOSTする」ということがあります。それを「ページ遷移」とするかどうかにもよるわけです。 **その「セクション切り分け」をGETとPOSTを組み合わせて作るのが1つ。** **つまりformの送信先を自身+セクション番号とすること です。** すると、セクション番号をGETで渡して、それによって取得するセクションの項目を決めるわけですね。 POSTで項目で選択した情報を送信するわけですね。 ただ、「戻る」必要があるかもしれませんのでセッションは覚えておいたほうが良いです。 最終的には全項目を送信するわけですし、隠し要素(input type=hidden)でずっとHTML内に埋め込むよりはセッションのほうが良いかなと(送信後、セッションを破棄する必要があります) ふたつめ。 **セクション毎に項目をおさめるHTMLを最初から用意しておき、JavaScriptで「次へ」「前へ」のボタンで「表示・非表示」のみを切り替える。** これは単純にするならCSSのdisplayの指定をblock/noneを切り替えるということになります。 もちろんあとは動きの問題なのでスライドするなりアニメーションつけるなりはご自由に。 問い合わせ項目の送信は全て一気に行います。 みっつめ。 **PJAX** 非同期通信を行い、セクション・問い合わせ項目を取得してきてセクションのグループをごそっとJavaScriptで入れ替えます。 すべて入れ替えるため、問い合わせ項目で選択した項目をどこかに保持しておく必要があります。PHPでサーバー側にセッションで持っておくか、 クライアント側でWebStorage(LocalStorage/SessionStorage)に持っておいて送信時はそこから取得してきてもいいかもしれません。 いずれにしても送信項目についてはJavaScriptで作って送信する必要があります。 ざっと思いついたのはこれくらい。 やりやすいのものから対応してみてください。 いずれにしても実際に作ってくためには「項目をどう持つか」「データをどう流すか・データを持つか」を考えるのは共通です。