web-dev-qa-db-ja.com

display：none要素内のフォームフィールドを送信する

私は6つのステップに分かれた長いフォームを持っています。フォームがロードされると、すべてのステップがロードされますが、最初のステップのみが表示されます。残りのCSSはdisplay:noneであるため、非表示になっています。ステップが完了し、JavaScriptで検証されると、現在のステップはdisplay:noneに設定され、新しいステップはdisplay:blockに設定されます。最後のステップで、ユーザーはフォームを送信します。ただし、予想どおり、ページのdisplay:block要素のフィールドのみが送信されます。 display:noneを持つ要素のすべての完成したフィールドは無視されます。

display:none要素内のフィールドを送信する方法はありますか？

そうでない場合、同じ効果を達成する別の方法はありますか？

javascriptcssforms
68
Nick Petrie

代わりにvisibility:hiddenおよびposition:absoluteに設定してください。フィールドはdisplay:noneでサーバーに送信されませんが、visibility:hiddenで送信されます。 「位置」を「絶対」に切り替えることで、同じ視覚効果を得ることができます。

更新これは、現在のブラウザーではもう問題ではないようです（2015年11月現在）。表示が「なし」に設定されている場合でも、フィールドは送信されます。ただし、「無効」になっているフィールドは送信されません。

149
adam0101

上記の答えに何かを追加するだけです。 slideDown()を使用する場合は、次のように要素のcssを設定する直前に：

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

slideDown()は問題なく動作します。 slideUp()にも同じロジックを使用できます。

0
Hristo Enev

HTML4のセクション17.13.2では、display：noneを使用した非表示のコントロールでさえ、提出に有効である可能性があると明示的に述べられています。

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

したがって、ブラウザがdisplay：noneを無視すると、完全にHTML対応ではなくなります。実際のブラウザに切り替えることをお勧めします。

0
elixon