오버헤드 없는 멀티 스텝 폼

오버헤드 없는 멀티 스텝 폼

대부분의 폼은 POST 방식을 사용합니다. GET 방식을 사용하는 사람은 거의 없습니다. GET은 URL 끝에 데이터를 추가합니다.

페이지 간에 데이터를 전달하려면 GET을 사용하세요. 데이터를 저장하기 위한 백엔드가 필요하지 않습니다. 필드를 보여주거나 숨기기 위해 Javascript를 사용할 필요도 없습니다. 브라우저의 내장 기능을 활용하세요.

• 정적 페이지로 폼을 구축하세요.
• 로직 구현을 위해 쿼리 스트링 데이터를 사용하세요.
• 이전 답변에 따라 특정 필드를 표시하세요.

페이지 간에 데이터를 전달하려면 이 스크립트를 사용하세요. URL로부터 hidden 필드를 생성합니다.

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