𝗠𝘂𝗹𝘁𝗶 𝘀𝘁𝗲𝗽 𝗳𝗼𝗿𝗺𝘀 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝘁𝗵𝗲 𝗼𝘃𝗲𝗿𝗵𝗲𝗮𝗱

オーバーヘッドなしで実現するマルチステップフォーム

ほとんどのフォームはPOSTメソッドを使用しますが、GETメソッドを使用する人はほとんどいません。GETはURLの末尾にデータを追加します。

ページ間でデータを渡すにはGETを使用しましょう。データを保存するためのバックエンドは必要ありません。フィールドの表示・非表示を切り替えるためのJavaScriptも不要です。ブラウザの標準機能を利用しましょう。

• 静的なページでフォームを構築する
• クエリ文字列のデータをロジックに使用する
• 前の回答に基づいて特定のフィールドを表示する

ページ間でデータを渡すには、このスクリプトを使用します。URLから隠しフィールドを作成します。

window.onload = function() {
  var querystring = window.location.href.split('?')[1];
  var parameters = querystring.split('&');

  for(i = 0; i < parameters.length; i++) {
    var pair = parameters[i].split('=');
    var hiddenfield = document.createElement("input");
    hiddenfield.type = "hidden";
    hiddenfield.name = pair[0];
    hiddenfield.value = pair[1];
    document.forms[0].appendChild(hiddenfield);
  }
};

最後にPOSTリクエストを使用して、最終的なデータをサーバーに送信します。データはブラウザ内に保持されます。

以下の点に注意してください：

• データがURLに表示されます。
• パスワードには使用しないでください。
• ユーザーがデータを含むURLを共有してしまう可能性があります。

出典: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc