web-dev-qa-db-ja.com

無効なフォーム入力はリクエストに表示されません

無効化された入力がフォームにあり、それらをサーバーに送信したいのですが、Chromeはそれらを要求から除外します。

隠しフィールドを追加せずにこれを回避する方法はありますか？

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>
htmlformshttpbrowser
297
hazzik

Disabled属性を持つ要素は送信されないか、それらの値は送信されないと言えます（ フォームデータセットを構築するための仕様 の手順3の2番目の箇条書きを参照）。

すなわち、

<input type="textbox" name="Percentage" value="100" disabled="disabled" />

ちなみに、

  1. 無効になっているコントロールはフォーカスを受けません。
  2. 無効化されたコントロールはタブナビゲーションでスキップされます。
  3. 無効にされたコントロールは正常に投稿できません。

あなたのケースでreadonly属性を使うことができます、これをすることによってあなたはあなたのフィールドのデータを投稿することができるでしょう。

すなわち、

<input type="textbox" name="Percentage" value="100" readonly="readonly" />

ちなみに、

  1. 読み取り専用要素はフォーカスを受け取りますが、ユーザーが変更することはできません。
  2. 読み取り専用要素は、タブナビゲーションに含まれています。
  3. 読み取り専用要素が正常に投稿されました。
656
AlphaMale

Jqueryを使用してajaxでデータを送信すると、問題を解決できます。

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>
23
LipeTuga

有効な入力に加えて無効な入力から値を転記するには、フォームの送信時にそのフォームのすべての入力を再度有効にすることができます。

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

あなたがjQueryを好めば：

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

ASP.NET MVC C＃Razorの場合は、次のように送信ハンドラを追加します。

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}
7
Tom Blodget

フィールドを無効にしてデータを渡す必要がある場合は、JavaScriptを使用して同じデータを隠しフィールドに入力します（または単に隠しフィールドも設定します）。これにより、無効にすることができますが、他のページに投稿している場合でもデータを投稿することができます。

7
Chris Pierce

非常に便利なので、私はこの答えを更新しています。入力にreadonlyを追加するだけです。

したがって、形式は次のようになります。

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>
2
Limon

私はこれがより簡単だと思います。入力フィールドのみを読み取り専用にしてから、エンドユーザーが読み取り専用であることがわかるようにスタイルを設定します。ここに配置された入力（AJAXなど）は、追加コードなしで送信できます。

<input readonly style="color: Grey; opacity: 1; ">
2
Erik Robinson

意味的にこれは正しい振る舞いのように感じます

「この値を送信する必要があるのはなぜですか。」

もしあなたがフォームに対して無効な入力をしているのなら、おそらくユーザーに直接値を変更させたくないでしょう。

無効な入力に表示される値はいずれも

  1. またはの形式を生成したサーバー上の値からの出力
  2. フォームが動的な場合は、フォーム上の他の入力から計算できるようにします。

フォームを処理するサーバーがそのフォームを処理するサーバーと同じであると仮定すると、無効化された入力の値を再現するためのすべての情報は処理時に使用可能になるはずです。

実際には、データの整合性を保つために - 無効な入力の値が処理サーバーに送信された場合でも、実際に検証する必要があります。 この検証には、とにかく値を再現する必要があるのと同じレベルの情報が必要です。

私はほとんど読み取り専用の入力もリクエストで送信されるべきではないと主張したい

是非とも修正してくださいすべての使用例読み取り専用または無効にした入力を送信する必要がある場所は、単にスタイルの問題にすぎません。変装

2
Arth