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

89

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?

html http field

— glaz666
fonte

129

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

— karim79
fonte

16

Com o pseudo seletor do jQuery em :inputvez de, inputvocê também pode desativar facilmente todos os elementos selectetextarea

— Daniel Rikowski

8

Em jQuery> = 1.6, em vez de attr("disabled", true)você deve usar prop("disabled", true) api.jquery.com/prop

— yorch

2

@ dominicbri7 - A partir do jQuery 1.6, usar em .prop()vez de .attr()é recomendado para obter E configurar propriedades desabilitadas e marcadas. Verificar e / ou definir usando .attr(), em alguns casos, retornará resultados indesejados. Por favor, leia a documentação do jQuery antes de comentar sobre o que yorch estava se referindo.

— zgr024

@ zgr024 bem, excluiu meu comentário

— dominicbri7

2

@DanielRikowski, O que há com esse jQuery aqui jQuery ali um absurdo. Vamos conversar sobre Vanilla JS.

— Pacerier

13

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.

— Benedict Cohen
fonte

7

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

— macio.Jun
fonte

Esta é uma solução muito boa, pois itera através do div oculto e desativa todos. deve receber mais +1

— sim

6

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.

— Antonio Max
fonte

Esta é uma ótima solução se você deseja obter todas as entradas. bom trabalho

— doz87

3

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.

— jsalvata
fonte

4

Não é recomendável porque se você alterar os estados por meio de javascript, dificilmente poderá redefinir as entradas sem armazenar em cache todos os atributos de nome. É muito mais fácil mudar o estado desativado.

— Simon

1

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.

— JMP
fonte