¿Cómo evitar enviar campos de entrada que están ocultos por la pantalla: ninguno a un servidor?

88

Imagine que tiene un formulario en el que cambia la visibilidad de varios campos. Y si el campo no se muestra, no desea que se solicite su valor.

¿Cómo maneja esta situación?

html http field

— glaz666
fuente

128

Establecer un elemento de formulario en deshabilitado evitará que vaya al servidor, por ejemplo:

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

En javascript significaría algo como esto:

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

En jQuery:

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

— karim79
fuente

16

Con el pseudo selector de jQuery en :inputlugar de input, también puede desactivar fácilmente todos los elementos selectytextarea

— Daniel Rikowski

8

En jQuery> = 1.6, en lugar de attr("disabled", true)debe usar prop("disabled", true) api.jquery.com/prop

— yorch

2

@ dominicbri7 - A partir de jQuery 1.6, se recomienda usar en .prop()lugar de .attr()para obtener Y configurar las propiedades desactivadas y marcadas. .attr()En algunos casos, comprobar o configurar el uso arrojará resultados no deseados. Lea la documentación de jQuery antes de comentar a qué se refería yorch.

— zgr024

@ zgr024 bien, borré mi comentario

— dominicbri7

2

@DanielRikowski, ¿Qué pasa con este jQuery aquí jQuery no tiene sentido? Hablemos de Vanilla JS.

— Pacerier

13

Puede usar javascript para establecer el atributo deshabilitado. El evento de clic del botón 'enviar' es probablemente el mejor lugar para hacer esto.

Sin embargo, desaconsejaría hacer esto en absoluto. Si es posible, debe filtrar su consulta en el servidor. Esto será más confiable.

— Benedict Cohen
fuente

7

Si desea deshabilitar todos los elementos o ciertos elementos dentro de un elemento principal oculto, puede usar

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

Este ejemplo http://jsfiddle.net/gKsTS/ deshabilita todos los cuadros de texto dentro de un div oculto

— macio.Jun
fuente

Esta es una muy buena solución ya que itera a través del div oculto y deshabilita todo. debería obtener más +1

— sí

6

Qué pasa:

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

y

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

Para alternar todas las entradas de los niños (selecciones, casillas de verificación, entrada, áreas de texto, etc.) dentro de un div oculto.

— Antonio Max
fuente

Esta es una gran solución si desea obtener todas las entradas. buen trabajo

— doz87

3

Una solución muy simple (pero no siempre la más conveniente) es eliminar el atributo "nombre" - el estándar requiere que los navegadores no envíen valores sin nombre, y todos los navegadores que conozco cumplen con esta regla.

— jsalvata
fuente

4

No es recomendable porque si cambia de estado a través de javascript, difícilmente podrá restablecer las entradas sin almacenar en caché todos los atributos del nombre. Es mucho más fácil cambiar el estado desactivado.

— Simon

1

Quitaría el valor de la entrada o separaría el objeto de entrada del DOM para que no exista para ser publicado en primer lugar.

— JMP
fuente