Làm thế nào để tránh gửi các trường đầu vào bị ẩn bởi display: none tới máy chủ?

88

Hãy tưởng tượng bạn có một biểu mẫu mà bạn chuyển đổi khả năng hiển thị của một số trường. Và nếu trường không được hiển thị, bạn không muốn giá trị của nó được yêu cầu.

Làm thế nào để bạn xử lý tình huống này?

html http field

— glaz666
nguồn

128

Đặt một phần tử biểu mẫu thành vô hiệu hóa sẽ ngăn nó truy cập vào máy chủ, ví dụ:

<input disabled="disabled" type="text" name="test"/>

Trong javascript nó sẽ có nghĩa như thế này:

var inputs = document.getElementsByTagName('input');
for(var i = 0;i < inputs.length; i++) {
    if(inputs[i].style.display == 'none') {
        inputs[i].disabled = true;
    }
}
document.forms[0].submit();

Trong jQuery:

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();

— karim79
nguồn

16

Với selector giả jQuery :inputthay vì inputbạn cũng có thể dễ dàng vô hiệu hóa tất cả selectvà textareacác yếu tố

— Daniel Rikowski

8

Trong jQuery> = 1.6, thay vì attr("disabled", true)bạn nên sử dụng prop("disabled", true) api.jquery.com/prop

— yorch Ngày

2

@ dominicbri7 - Kể từ jQuery 1.6, việc sử dụng .prop()thay vì .attr()được khuyến nghị để nhận AND thiết lập cả thuộc tính đã tắt và đã kiểm tra. Kiểm tra và hoặc cài đặt bằng cách sử dụng .attr()trong một số trường hợp sẽ trả lại kết quả không mong muốn. Vui lòng đọc tài liệu jQuery trước khi nhận xét về những gì yorch đang đề cập đến.

— zgr024,

@ zgr024 tốt, xóa nhận xét của tôi

— dominicbri7

2

@DanielRikowski, Chuyện gì xảy ra với jQuery đây jQuery ở đó vớ vẩn. Hãy nói chuyện với Vanilla JS.

— Pacerier

13

Bạn có thể sử dụng javascript để đặt thuộc tính bị vô hiệu hóa. Sự kiện nhấp vào nút 'gửi' có lẽ là nơi tốt nhất để làm điều này.

Tuy nhiên, tôi khuyên bạn không nên làm điều này. Nếu có thể, bạn nên lọc truy vấn của mình trên máy chủ. Điều này sẽ đáng tin cậy hơn.

— Benedict Cohen
nguồn

7

Nếu bạn muốn vô hiệu hóa tất cả các phần tử hoặc các phần tử nhất định trong một phần tử mẹ ẩn, bạn có thể sử dụng

$("div").filter(":hidden").children("input[type='text']").attr("disabled", "disabled");

Ví dụ này http://jsfiddle.net/gKsTS/ tắt tất cả các hộp văn bản trong một div ẩn

— macio.Jun
nguồn

Đây là một giải pháp rất tốt khi lặp qua div ẩn và vô hiệu hóa tất cả. nó sẽ nhận được nhiều +1 hơn

— yeppe

6

Thế còn:

$('#divID').children(":input").prop("disabled", true); // disable

và

$('#divID').children(":input").prop("disabled", false); // enable

Để chuyển đổi tất cả các đầu vào con (lựa chọn, hộp kiểm, đầu vào, vùng văn bản, v.v.) bên trong một div ẩn.

— Antonio Max
nguồn

Đây là một giải pháp tuyệt vời nếu bạn muốn lấy tất cả các đầu vào. làm tốt lắm

— doz87

3

Một giải pháp rất đơn giản (nhưng không phải lúc nào cũng là thuận tiện nhất) là xóa thuộc tính "name" - tiêu chuẩn yêu cầu các trình duyệt không được gửi các giá trị không có tên và tất cả các trình duyệt mà tôi biết đều tuân thủ quy tắc này.

— jsalvata
nguồn

4

Không được khuyến khích vì nếu bạn thay đổi trạng thái thông qua javascript, bạn khó có thể đặt lại các đầu vào mà không lưu vào bộ nhớ đệm tất cả các thuộc tính tên. Cách dễ dàng hơn để chuyển trạng thái bị vô hiệu hóa.

— Simon

1

Tôi sẽ xóa giá trị khỏi đầu vào hoặc tách đối tượng đầu vào khỏi DOM để nó không tồn tại để được đăng ngay từ đầu.

— JMP
nguồn