Как избежать отправки на сервер полей ввода, которые скрыты отображением: none?

88

Представьте, что у вас есть форма, в которой вы переключаете видимость нескольких полей. И если поле не отображается, вы не хотите, чтобы его значение было в запросе.

Как вы справляетесь с этой ситуацией?

html http field

— glaz666
источник

128

Установка для элемента формы значения disabled остановит его отправку на сервер, например:

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

В javascript это будет означать что-то вроде этого:

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

В jQuery:

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

— karim79
источник

16

С селектором псевдо JQuery в :inputвместо того , чтобы inputвы также можете легко отключить все selectи textareaэлементы

— Daniel Rikowski

8

В JQuery> = 1.6, а attr("disabled", true)вы должны использовать prop("disabled", true) api.jquery.com/prop

— yorch

2

@ dominicbri7 - Начиная с jQuery 1.6, для получения И установки как отключенных, так и проверенных свойств рекомендуется использовать .prop()вместо .attr(). Проверка и / или настройка с помощью .attr()в некоторых случаях возвращает нежелательные результаты. Пожалуйста, прочтите документацию jQuery, прежде чем комментировать, о чем имел в виду Йорч.

— zgr024

@ zgr024 отлично, мой комментарий удалил

— dominicbri7

2

@DanielRikowski, что с этим jQuery тут jQuery там ерунда. Давайте поговорим о Vanilla JS.

— Pacerier

13

Вы можете использовать javascript для установки отключенного атрибута. Событие нажатия кнопки «отправить», вероятно, лучшее место для этого.

Однако я бы не советовал вообще этого делать. Если возможно, вам следует отфильтровать свой запрос на сервере. Так будет надежнее.

— Бенедикт Коэн
источник

7

Если вы хотите отключить все элементы или определенные элементы в скрытом родительском элементе, вы можете использовать

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

В этом примере http://jsfiddle.net/gKsTS/ отключаются все текстовые поля в скрытом div

— macio.Июнь
источник

Это очень хорошее решение, поскольку оно перебирает скрытый div и отключает все. он должен получить больше +1

— yeppe

6

Что о:

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

а также

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

Чтобы переключить все дочерние входы (выбор, флажки, ввод, текстовые поля и т. Д.) Внутри скрытого div.

— Антонио Макс
источник

Это отличное решение, если вы хотите получить все входные данные. хорошая работа

— doz87

3

Одно очень простое (но не всегда самое удобное) решение - удалить атрибут name - стандарт требует, чтобы браузеры не отправляли безымянные значения, и все браузеры, которые я знаю, соблюдают это правило.

— jsalvata
источник

4

Не рекомендуется, потому что, если вы меняете состояния через javascript, вы вряд ли сможете сбросить входные данные без кэширования всех атрибутов имени. Намного проще переключить отключенное состояние.

— Саймон

1

Я бы либо удалил значение из ввода, либо отделил объект ввода от DOM, чтобы он не существовал для публикации в первую очередь.

— JMP
источник