Biểu mẫu nhiều bước mà không cần sự phức tạp không đáng có

Hầu hết các biểu mẫu đều sử dụng phương thức POST. Rất ít người sử dụng phương thức GET. GET thêm dữ liệu vào cuối URL của bạn.

Sử dụng GET để truyền dữ liệu giữa các trang. Bạn không cần backend để lưu trữ dữ liệu. Bạn không cần Javascript để hiển thị hoặc ẩn các trường. Hãy sử dụng các tính năng có sẵn của trình duyệt.

Sử dụng đoạn mã này để truyền dữ liệu qua các trang. Nó sẽ tạo ra các trường ẩn từ 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); } };

Gửi dữ liệu cuối cùng đến máy chủ của bạn bằng một yêu cầu POST ở bước cuối cùng. Dữ liệu sẽ được lưu lại trong trình duyệt.

Hãy lưu ý các điểm sau:

Nguồn: https://dev.to/ovidem/multi-step-form-without-the-overhead-5bjc