Come evitare di inviare campi di input nascosti dal display: nessuno a un server?

88

Immagina di avere un modulo in cui cambi la visibilità di diversi campi. E se il campo non viene visualizzato, non vuoi che il suo valore sia richiesto.

Come gestisci questa situazione?

html http field

— glaz666
fonte

128

L'impostazione di un elemento del modulo su disabilitato ne impedirà l'accesso al server, ad esempio:

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

In javascript significherebbe qualcosa del genere:

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

In jQuery:

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

— karim79
fonte

16

Con lo pseudo selettore di jQuery :inputinvece di inputte puoi anche disabilitare facilmente tutti gli elementi selectetextarea

— Daniel Rikowski

8

In jQuery> = 1.6, invece di attr("disabled", true)dovresti usare prop("disabled", true) api.jquery.com/prop

— yorch

2

@ dominicbri7 - A partire da jQuery 1.6, si consiglia di utilizzare .prop()invece di .attr()per ottenere AND impostare le proprietà sia disabilitate che controllate. Il controllo e / o l'impostazione utilizzando .attr()in alcuni casi restituiranno risultati indesiderati. Si prega di leggere la documentazione di jQuery prima di commentare a cosa si riferiva yorch.

— zgr024

@ zgr024 bene, ho cancellato il mio commento

— dominicbri7

2

@DanielRikowski, cosa c'è con questo jQuery qui jQuery lì non ha senso. Parliamo di Vanilla JS.

— Pacerier

13

È possibile utilizzare javascript per impostare l'attributo disabilitato. L'evento clic sul pulsante "invia" è probabilmente il posto migliore per farlo.

Tuttavia, consiglierei di non farlo affatto. Se possibile, dovresti filtrare la tua query sul server. Questo sarà più affidabile.

— Benedict Cohen
fonte

7

Se vuoi disabilitare tutti gli elementi o determinati elementi all'interno di un elemento genitore nascosto, puoi usare

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

Questo esempio http://jsfiddle.net/gKsTS/ disabilita tutte le caselle di testo all'interno di un div nascosto

— macio.Jun
fonte

Questa è un'ottima soluzione in quanto itera attraverso il div nascosto e disabilita tutto. dovrebbe ottenere più +1

— yeppe

6

Che dire:

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

e

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

Per attivare / disattivare tutti gli input figli (seleziona, caselle di controllo, input, aree di testo, ecc.) All'interno di un div nascosto.

— Antonio Max
fonte

Questa è un'ottima soluzione se vuoi prendere tutti gli input. buon lavoro

— doz87

3

Una soluzione molto semplice (ma non sempre la più conveniente) è rimuovere l'attributo "nome": lo standard richiede che i browser non inviino valori senza nome e tutti i browser che conosco rispettano questa regola.

— jsalvata
fonte

4

Sconsigliabile perché se cambi stato tramite javascript difficilmente puoi resettare gli input senza mettere in cache tutti gli attributi del nome. È molto più semplice cambiare lo stato disabilitato.

— Simon

1

Rimuoverei il valore dall'input o scollegherei l'oggetto di input dal DOM in modo che non esista per essere pubblicato in primo luogo.

— JMP
fonte