web-dev-qa-db-ja.com

display:noneによって非表示になっている入力フィールドをサーバーに送信しないようにする方法

複数のフィールドの可視性を切り替えるフォームがあるとします。また、フィールドが表示されていない場合、その値を要求したくありません。

この状況にどのように対処しますか?

85
glaz666

フォーム要素を無効に設定すると、サーバーへの移動が停止します。例:

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

Javascriptでは、次のようなものを意味します。

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

JQueryの場合:

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

Javascriptを使用して、無効な属性を設定できます。 「送信」ボタンのクリックイベントは、おそらくこれを行うのに最適な場所です。

ただし、これを行うことはまったくお勧めしません。可能であれば、サーバーでクエリをフィルタリングする必要があります。これはより信頼できるでしょう。

13
Benedict Cohen

すべての要素または非表示の親要素内の特定の要素を無効にする場合は、次を使用できます。

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

この例 http://jsfiddle.net/gKsTS/ は非表示のdiv内のすべてのテキストボックスを無効にします

7
macio.Jun

どうですか:

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

そして

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

非表示のdiv内のすべての子入力(選択、チェックボックス、入力、テキストエリアなど)を切り替えます。

5
Antonio Max

1つの非常に単純な(常に最も便利なわけではない)ソリューションは、「名前」属性を削除することです。標準では、ブラウザーは名前のない値を送信しないことを要求します。

3
jsalvata

入力から値を削除するか、入力オブジェクトをDOMから切り離して、そもそも存在しないようにします。

1
JMP