$ .serialize()で無効になっている:input要素を考慮に入れるにはどうすればよいですか?


135

デフォルトでは、無効になっている入力要素は無視され$.serialize()ます。回避策はありますか?


障害者はシリアル化できますが、障害者はシリアル化できtextareaませんinput..
daVe

回答:


233

それらを一時的に有効にします。

var myform = $('#myform');

 // Find disabled inputs, and remove the "disabled" attribute
var disabled = myform.find(':input:disabled').removeAttr('disabled');

 // serialize the form
var serialized = myform.serialize();

 // re-disabled the set of inputs that you previously enabled
disabled.attr('disabled','disabled');

26
以下のAndrewが言及するreadonly代わりにdisabled、検討する価値があります。
アンディラブス2014

93

無効な入力の代わりに読み取り専用の入力を使用します。

<input name='hello_world' type='text' value='hello world' readonly />

これは、serialize()によって取得されます。


すばらしい、ただのメモ:読み取り専用の場合でも、送信ボタンはクリック可能です。
アンドレ・Chalella

3
無効にするとシリアル化はできなくなりますが、読み取り専用では検証できなくなります
Jeff Lowery

11

プロキシ関数を使用できます(これは$.serializeArray()およびの両方に影響します$.serialize())。

(function($){
    var proxy = $.fn.serializeArray;
    $.fn.serializeArray = function(){
        var inputs = this.find(':disabled');
        inputs.prop('disabled', false);
        var serialized = proxy.apply( this, arguments );
        inputs.prop('disabled', true);
        return serialized;
    };
})(jQuery);

最良のソリューション、選択、チェックボックス、ラジオ、非表示および無効な入力に対応
Plasebo

9

@ user113716が中心的な答えを提供しました。ここでの私の貢献は、それに関数を追加することによるjQueryの便利さです。

/**
 * Alternative method to serialize a form with disabled inputs
 */
$.fn.serializeIncludeDisabled = function () {
    let disabled = this.find(":input:disabled").removeAttr("disabled");
    let serialized = this.serialize();
    disabled.attr("disabled", "disabled");
    return serialized;
};

使用例:

$("form").serializeIncludeDisabled();

4

これを試して:

<input type="checkbox" name="_key" value="value"  disabled="" />
<input type="hidden" name="key" value="value"/>

もう少し詳しく説明して、なぜこれが機能するのかをOPに説明してください。
Willem Mulder

それを説明できます。何らかの理由で入力フィールドを無効にしたいが、serialize()メソッドで入力名を送信したい場合。次に、代わりに、serialize()が無視しない非表示の入力フィールド(無効な入力フィールドと同じ値を持つ)を使用できます。また、表示されないように無効な入力フィールドを保持することもできます。
superkytoz 14

3

私はいくつかの回避策を見ることができますが、それでも誰もあなた自身のシリアル化関数を書くことを提案しませんでしたか?ここに行きます:https : //jsfiddle.net/Lnag9kbc/

var data = [];

// here, we will find all inputs (including textareas, selects etc)
// to find just disabled, add ":disabled" to find()
$("#myform").find(':input').each(function(){
    var name = $(this).attr('name');
    var val = $(this).val();
    //is name defined?
    if(typeof name !== typeof undefined && name !== false && typeof val !== typeof undefined)
    {
        //checkboxes needs to be checked:
        if( !$(this).is("input[type=checkbox]") || $(this).prop('checked'))
            data += (data==""?"":"&")+encodeURIComponent(name)+"="+encodeURIComponent(val);
    }
});

2

W3C標準では、「無効」とは入力エレメントが使用されないことを意味するため、無効化された入力要素はシリアル化されません。jQueryは、一部のブラウザーでは許可されていませんが、標準に従っているだけです。これを回避するには、無効なフィールドと同じ値の非表示フィールドを追加するか、jQueryを使用して次のようにします。

$('#myform').submit(function() {
  $(this).children('input[hiddeninputname]').val($(this).children('input:disabled').val());
  $.post($(this).attr('url'), $(this).serialize, null, 'html');
});

明らかに、無効な入力が複数ある場合は、一致するセレクターなどを反復処理する必要があります。


1

誰かがそれらをアクティブ化したくない場合は、それらを再び無効にして、これをもう一度試すこともできます(serializeArray取得されないDisabledフィールドから、プラグインの使用から通常の関数の使用に変更しました)。

function getcomment(item)
{
  var data = $(item).serializeArray();
  $(':disabled[name]',item).each(function(){
    data.push({name: item.name,value: $(item).val()});
  });
  return data;
}

したがって、次のように呼び出すことができます。

getcomment("#formsp .disabledfield");

1
私はあなたの関数を試しましたが、要素の名前や値を生成しません。以下の例を参照してください。code 3:{名前:未定義、値: ""} 4:{名前:未定義、値: ""}
ブラックマンボ

0

アーロンヒュードンのほんの少し:

多分あなたは入力以外のもの(selectのような)を持っているので、私は変更しました

this.find(":input:disabled")

this.find(":disabled")
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.