Gửi các trường biểu mẫu bên trong màn hình: không có phần tử nào

Tôi có một biểu mẫu dài mà tôi đã chia thành 6 bước. Khi biểu mẫu được tải, tất cả các bước đều được tải, nhưng chỉ bước đầu tiên được hiển thị. Phần còn lại có CSS display:nonenên chúng bị ẩn. Khi một bước được hoàn thành và xác thực bằng Javascript, bước hiện tại được đặt thành display:nonevà bước mới được đặt thành display:block. Ở bước cuối cùng, người dùng gửi biểu mẫu. Tuy nhiên, như mong đợi, chỉ các trường trong display:blockphần tử trên trang được gửi. Tất cả các trường đã hoàn thành trong các phần tử với display:noneđều bị bỏ qua.

Có cách nào để gửi các trường bên trong các display:nonephần tử không?

Nếu không, có cách nào khác để đạt được hiệu quả tương tự không?

javascript css forms

— Nick Petrie
nguồn

Bạn đã thấy hành vi này trong trình duyệt nào? Các trình duyệt dường như gửi các phần tử biểu mẫu trong vùng display: nonechứa trong tất cả các thử nghiệm của tôi.

— run rẩy vào

Câu trả lời:

177

Đặt chúng thành visibility:hiddenvà position:absolutethay vào đó. Các trường sẽ không được gửi đến máy chủ với display:none, nhưng sẽ được gửi với visibility:hidden. Bằng cách chuyển đổi "vị trí" thành "tuyệt đối", bạn sẽ có được hiệu ứng hình ảnh tương tự.

Cập nhật Đây dường như không còn là vấn đề trong bất kỳ trình duyệt hiện tại nào (kể từ tháng 11 năm 2015). Các trường được gửi ngay cả khi hiển thị được đặt thành 'không có'. Tuy nhiên, các trường bị 'vô hiệu hóa' sẽ tiếp tục không được gửi.

— adam0101
nguồn

Đây không phải là vấn đề trong bất kỳ trình duyệt hiện tại nào. Các trường được gửi ngay cả khi hiển thị được đặt thành 'không có'. Tuy nhiên, các trường bị 'vô hiệu hóa' sẽ tiếp tục không được gửi.

— adam0101

IE8 (thật bất ngờ!) Vẫn gặp sự cố với các trường đăng được đặt thành display:none;. Vấn đề tương tự cũng xảy ra nếu trường có một phần tử HTML khác được đặt trên nó.

— Erik Töyrä Silfverswärd,

@Pacerier, có disabledngăn không cho các giá trị được gửi, nhưng trên một số trình duyệt cũ hơn, display:nonecũng sẽ có tác dụng này. Hãy nhớ rằng câu trả lời này đã được đăng cách đây 4 năm và chỉ áp dụng cho các nhà phát triển cần phát triển cho các trình duyệt cũ hơn đó.

— adam0101

Đó là ngày 20 tháng một và sử dụng phiên bản mới nhất của crom và Firefox nhưng vẫn không thể bài lĩnh vực đã được ẩn trước đây về tải

— Masinde Muliro

Chrome 49 tại đây, có thể xác nhận rằng việc gửi các yếu tố đầu vào trong màn hình: không có yếu tố nào KHÔNG hoạt động.

— csvan

HTML4, mục 17.13.2, nói rõ ràng rằng ngay cả các điều khiển ẩn sử dụng hiển thị: không có điều nào có thể hợp lệ để gửi.

https://www.w3.org/TR/html401/interact/forms.html

Vì vậy, nếu trình duyệt bỏ qua hiển thị: không có thì nó không hoàn toàn có khả năng HTML. Tôi khuyên bạn nên chuyển sang một trình duyệt thực.

— elixon
nguồn

Một lập trình viên không thể cho khách truy cập biết trình duyệt nào cũng đang sử dụng và tôi đang gặp vấn đề tương tự với Firefox mới nhất. Đang thử hiển thị: không có hoặc hiển thị: ẩn nhưng không hoạt động.

— DonP

Ai khác đang đặt biểu ngữ "Đã đến lúc nâng cấp trình duyệt của bạn" trên nhiều trang web như vậy? ;-) Tôi hiểu rồi. Ý bạn không phải là "lập trình viên không thể cho khách truy cập biết sử dụng trình duyệt nào" - điều đó sẽ vi phạm quyền tự do ngôn luận ... Có thể bạn muốn nói là "lập trình viên được thuê". ĐỒNG Ý. Bài đăng của tôi không hữu ích lắm vì tôi chỉ muốn chỉ ra đâu là hành vi đúng được quy định bởi các tiêu chuẩn. Đó là nó.

— elixon 14/02/19

Trong mọi trường hợp, nhận xét của tôi về khả năng hiển thị: ẩn (và thậm chí có thể hiển thị: không có) là vô nghĩa vì tôi nhận ra rằng trong trường hợp của tôi, đó là một lỗi, hay đúng hơn là một sự giám sát, được viết vào tiêu chuẩn HTML. Nếu một hộp kiểm không được chọn và biểu mẫu được gửi đi, nó sẽ như thể nó không có ở đó. Nó không những không phục tùng gì cả (tha thứ cho phép phủ định kép) mà còn không phục tùng chút nào.

— DonP

Vì vậy, có vẻ như nó không phải là một số trình duyệt kỳ quặc không tuân thủ HTML. Trường hợp đóng cửa.

— elixon