Jak uniknąć wysyłania na serwer pól wejściowych, które są ukryte przez display: none?

88

Wyobraź sobie, że masz formularz, w którym zmieniasz widoczność kilku pól. A jeśli pole nie jest wyświetlane, nie chcesz, aby jego wartość była żądana.

Jak sobie radzisz w tej sytuacji?

html http field

— glaz666
źródło

128

Ustawienie elementu formularza na wyłączony spowoduje, że nie będzie on trafiał na serwer, np .:

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

W javascript oznaczałoby to coś takiego:

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();

W jQuery:

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

— karim79
źródło

16

Za pomocą pseudo selektora jQuery :inputzamiast inputciebie możesz też łatwo wyłączyć wszystkie elementy selectitextarea

— Daniel Rikowski,

8

W jQuery> = 1.6 zamiast attr("disabled", true)używać prop("disabled", true) api.jquery.com/prop

— yorch

2

@ dominicbri7 - Począwszy od jQuery 1.6, używanie .prop()zamiast .attr()jest zalecane w celu uzyskania ORAZ ustawiania zarówno wyłączonych, jak i sprawdzonych właściwości. Sprawdzenie i / lub ustawienie przy użyciu .attr()w niektórych przypadkach zwróci niepożądane rezultaty. Przeczytaj dokumentację jQuery, zanim skomentujesz, do czego odnosi się yorch.

— zgr024

@ zgr024 dobrze, usunąłem mój komentarz

— dominicbri7

2

@DanielRikowski, O co chodzi z tym jQuery tutaj jQuery tam bzdury. Porozmawiajmy o Vanilla JS.

— Pacerier,

13

Możesz użyć javascript, aby ustawić wyłączony atrybut. Zdarzenie polegające na kliknięciu przycisku „Prześlij” jest prawdopodobnie najlepszym miejscem do tego.

Jednak odradzałbym to w ogóle. Jeśli to możliwe, powinieneś filtrować zapytanie na serwerze. To będzie bardziej niezawodne.

— Benedict Cohen
źródło

7

Jeśli chcesz wyłączyć wszystkie elementy lub niektóre elementy w ukrytym elemencie nadrzędnym, możesz użyć

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

Ten przykład http://jsfiddle.net/gKsTS/ wyłącza wszystkie pola tekstowe w ukrytym div

— macio.Jun
źródło

Jest to bardzo dobre rozwiązanie, ponieważ iteruje przez ukryty div i wyłącza wszystkie. powinno dostać więcej +1

— tak

6

Co powiesz na:

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

i

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

Aby przełączyć wszystkie dzieci wejściowe (zaznaczenia, pola wyboru, dane wejściowe, obszary tekstowe itp.) Wewnątrz ukrytego elementu div.

— Antonio Max
źródło

To świetne rozwiązanie, jeśli chcesz pobrać wszystkie dane wejściowe. dobra robota

— doz87

3

Bardzo prostym (ale nie zawsze najwygodniejszym) rozwiązaniem jest usunięcie atrybutu „nazwa” - standard wymaga, aby przeglądarki nie wysyłały nienazwanych wartości, a wszystkie przeglądarki, które znam, przestrzegają tej zasady.

— jsalvata
źródło

4

Niezalecane, ponieważ jeśli zmienisz stany za pomocą JavaScript, trudno będzie zresetować dane wejściowe bez buforowania wszystkich atrybutów nazw. O wiele łatwiej jest zmienić stan wyłączenia.

— Simon,

1

Chciałbym albo usunąć wartość z wejścia, albo odłączyć obiekt wejściowy od DOM, aby nie istniał, aby został wysłany w pierwszej kolejności.

— JMP
źródło