2011-11-29 11 views
56

Ho un modulo lungo che ho suddiviso in 6 passaggi. Quando il modulo viene caricato, tutti i passaggi vengono caricati, ma solo il primo passaggio è visibile. Il resto ha CSS di display:none quindi sono nascosti. Una volta completato e convalidato con Javascript, il passaggio corrente è impostato su display:none e il nuovo passaggio è impostato su display:block. Nel passaggio finale, l'utente invia il modulo. Tuttavia, come previsto, vengono inviati solo i campi nell'elemento display:block nella pagina. Tutti i campi completati negli elementi con display:none vengono ignorati.Invia campi modulo all'interno del display: nessuno elemento

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

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

+0

Si potrebbe voler controllare il plug-in del modulo jquery: http://thecodemine.org/ Potrebbe darti qualche idea o persino soddisfare ciò che stai cercando. –

+8

In quale browser hai visualizzato questo comportamento? I browser sembrano inviare elementi di modulo all'interno dei contenitori 'display: none' in tutti i miei test. – tremby

risposta

120

Impostare su visibility:hidden e position:absolute invece. I campi non verranno inviati al server con display:none, ma saranno con visibility:hidden. Spostando anche "posizione" su "assoluto" si dovrebbe ottenere lo stesso effetto visivo.

Aggiornamento Questo non sembra essere più un problema in alcun browser corrente (a partire da Nov del 2015). I campi vengono inviati anche se il display è impostato su "nessuno". I campi "disabilitati", tuttavia, continueranno a non essere inviati.

+0

Posso farlo con jquery slideUp() e slideDown()? –

+0

Non ho molta familiarità con jQuery. Com'è display: nessuno viene impostato in questo momento? Se lo fai, dovresti essere in grado di sostituire quel codice con il codice che imposta la posizione e la visibilità. Se è nascosto in un framework, devi vedere se c'è un modo per ignorare il comportamento o trovare un altro lavoro. – adam0101

+0

no non puoi farlo con SlideDown, perché alla fine del "display" dell'elemento html dell'animazione si imposta su "none" – siniradam

0

Solo per aggiungere qualcosa alla risposta sopra. Se si desidera utilizzare slideDown() - appena prima che impostare il css dell'elemento in questo modo:

$('element') 
    .css({ 
     display: 'none' 
     position: 'relative', 
     visibility: 'visible' 
    }) 
    .slideDown(); 

E slideDown() funzionano bene. È possibile utilizzare la stessa logica per slideUp().