Como evitar o envio de campos de entrada que estão ocultos por display: none para um servidor?

Imagine que você tem um formulário onde você muda a visibilidade de vários campos. E se o campo não for exibido, você não quer que seu valor seja solicitado.

Como você lida com essa situação?

Definir um elemento de formulário como desativado irá impedi-lo de ir para o servidor, por exemplo:

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

Em javascript, significaria algo assim:

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

Em jQuery:

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

Você pode usar javascript para definir o atributo desativado. O evento de clique do botão 'enviar' é provavelmente o melhor lugar para fazer isso.

No entanto, eu não aconselharia fazer isso de forma alguma. Se possível, você deve filtrar sua consulta no servidor. Isso será mais confiável.

Se você quiser desabilitar todos os elementos ou certos elementos dentro de um elemento pai oculto, você pode usar

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

Este exemplo http://jsfiddle.net/gKsTS/ desativa todas as caixas de texto em um div oculto

A respeito:

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

e

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

Para alternar todas as entradas filho (seleções, caixas de seleção, entrada, áreas de texto, etc) dentro de um div oculto.

Uma solução muito simples (mas nem sempre a mais conveniente) é remover o atributo "nome" - o padrão exige que os navegadores não enviem valores não nomeados e todos os navegadores que conheço obedecem a essa regra.

Eu removeria o valor da entrada ou desanexaria o objeto de entrada do DOM para que ele não existisse para ser postado em primeiro lugar.