Invia campi modulo all'interno del display: nessun elemento

Ho una forma lunga che ho suddiviso in 6 passaggi. Quando il modulo viene caricato, vengono caricati tutti i passaggi, ma è visibile solo il primo passaggio. Il resto ha CSS di display:nonequindi sono nascosti. Quando un passaggio viene completato e convalidato con Javascript, il passaggio corrente viene impostato su display:nonee il nuovo passaggio viene impostato su display:block. Nella fase finale, l'utente invia il modulo. Tuttavia, come previsto, display:blockvengono inviati solo i campi nell'elemento della pagina. Tutti i campi completati negli elementi con display:nonevengono ignorati.

C'è un modo per inviare i campi all'interno degli display:noneelementi?

In caso contrario, esiste un altro modo per ottenere lo stesso effetto?

javascript css forms

— Nick Petrie
fonte

In quale browser hai visto questo comportamento? I browser sembrano inviare elementi del modulo all'interno dei display: nonecontenitori in tutti i miei test.

— tremby

Risposte:

183

Impostali su visibility:hiddene position:absoluteinvece. I campi non verranno inviati al server con display:none, ma saranno con visibility:hidden. Anche spostando "posizione" su "assoluto" dovresti ottenere lo stesso effetto visivo.

Aggiornamento Questo non sembra più essere un problema in nessun browser corrente (a partire da novembre 2015). I campi vengono inviati anche se la visualizzazione è impostata su "nessuno". I campi "disabilitati", tuttavia, continueranno a non essere inviati.

— adam0101
fonte

Questo non sembra essere un problema in nessun browser corrente. I campi vengono inviati anche se la visualizzazione è impostata su "nessuno". I campi "disabilitati", tuttavia, continueranno a non essere inviati.

— adam0101

IE8 (sorpresa!) Ha ancora problemi con i campi di pubblicazione impostati su display:none;. Lo stesso problema si verifica se il campo ha un altro elemento HTML posizionato sopra di esso.

— Erik Töyrä Silfverswärd

@Pacerier, sì disabledimpedisce l' invio di valori, ma su alcuni browser meno recenti display:noneavrebbe anche questo effetto. Tieni presente che questa risposta è stata pubblicata 4 anni fa ed è applicabile solo agli sviluppatori che devono sviluppare per quei browser meno recenti.

— adam0101

È il 20 gennaio e si utilizzano le ultime versioni di Chrome e Firefox, ma non è ancora possibile pubblicare campi nascosti in precedenza durante il caricamento

— Masinde Muliro

Chrome 49 qui, può confermare che l'invio di elementi di input all'interno del display: nessuno NON funziona.

— csvan

L'HTML4, sezione 17.13.2, afferma esplicitamente che anche i controlli nascosti che utilizzano display: nessuno può essere valido per l'invio.

https://www.w3.org/TR/html401/interact/forms.html

Quindi, se il browser ignora la visualizzazione: nessuna, non è completamente compatibile con HTML. Consiglio di passare a un browser reale.

— elixon
fonte

Un programmatore non può dire ai visitatori quale browser usa anche io e sto riscontrando lo stesso problema con l'ultimo Firefox. Tentativo di visualizzazione: nessuno o visibilità: nascosto ma nessuno dei due funziona.

— DonP

Chi altro sta inserendo banner "È ora di aggiornare il tuo browser" su così tanti siti? ;-) Capisco. Non volevi dire che "il programmatore non può dire ai visitatori quale browser usare" - ciò violerebbe la libertà di espressione ... Probabilmente intendevi "programmatore assunto". OK. Il mio post non è stato di grande aiuto perché volevo solo segnalare qual è il comportamento corretto dettato dagli standard. Questo è tutto.

— elixon

In ogni caso, il mio commento sulla visibilità: nascosto (e forse anche display: nessuno) era una sciocchezza poiché mi sono reso conto che nel mio caso si tratta di un bug, o meglio di una svista, scritto nello standard HTML. Se una casella di controllo è deselezionata e il modulo inviato, è come se non fosse nemmeno lì. Non solo non presenta nulla (scusate il doppio negativo) ma non si sottomette affatto.

— DonP

Quindi sembra che allora non fosse un bizzarro browser non compatibile con HTML. Caso chiuso.

— elixon