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

Question 1

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?

Question 2

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

Question 3

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.

Question 4

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

Question 5

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.

Question 6

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.

Question 7

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.

Answer 1

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

Answer 2

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,

Answer 3

16