Bagaimana cara membuat $ .serialize () memperhitungkan elemen input yang dinonaktifkan:?


137

Tampaknya elemen masukan yang dinonaktifkan secara default diabaikan oleh $.serialize(). Apakah ada solusinya?


Ini bahkan lebih aneh, karena Anda dapat membuat serial yang cacat textareatetapi bukan yang cacat input..
daVe

Jawaban:


238

Aktifkan untuk sementara.

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

28
layak dipertimbangkan readonlydaripada yang disableddisebutkan oleh Andrew di bawah ini.
andilabs

Inilah alasannya: "Hanya" kontrol yang berhasil "yang diserialkan ke string." - w3.org/TR/html401/interact/forms.html#h-17.13.2
Meetai.com

94

Gunakan input hanya-baca, bukan input yang dinonaktifkan:

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

Ini harus diambil oleh serialize ().


1
Bagus, hanya catatan: tombol kirim masih dapat diklik saat hanya baca.
André Chalella

4
dinonaktifkan mencegah serialisasi, tetapi hanya membaca mencegah validasi
Jeff Lowery

12

Anda dapat menggunakan fungsi yang diproksikan (ini memengaruhi keduanya $.serializeArray()dan $.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);

Solusi terbaik, berfungsi untuk pilih, kotak centang, radio, input tersembunyi dan nonaktif
Plasebo

9

@ user113716 memberikan jawaban inti. Kontribusi saya di sini hanyalah kebaikan jQuery dengan menambahkan fungsi ke dalamnya:

/**
 * 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;
};

Contoh penggunaan:

$("form").serializeIncludeDisabled();

5

Coba ini:

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

Bisakah Anda menjelaskan lebih lanjut dan menjelaskan kepada OP mengapa ini berhasil?
Willem Mulder

Saya bisa menjelaskannya untuk Anda. Jika Anda masih ingin kolom input dinonaktifkan (untuk alasan apa pun), tetapi Anda juga ingin mengirim nama input dengan metode serialize (). Kemudian sebagai gantinya Anda dapat menggunakan kolom input tersembunyi (dengan nilai yang sama dengan kolom input yang dinonaktifkan), yang tidak diabaikan oleh serialize (). Dan kemudian Anda juga dapat menyimpan bidang masukan yang dinonaktifkan untuk visibilitas.
superkytoz

3

Saya dapat melihat beberapa solusi, tetapi masih tidak ada yang menyarankan untuk menulis fungsi serialisasi Anda sendiri? Ini dia: 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

Elemen masukan yang dinonaktifkan tidak dapat diserialkan karena 'nonaktif' berarti elemen tersebut tidak boleh digunakan, sesuai standar W3C. jQuery hanya mematuhi standar, meskipun beberapa browser tidak. Anda dapat mengatasinya, dengan menambahkan bidang tersembunyi dengan nilai yang identik dengan bidang yang dinonaktifkan, atau dengan melakukan ini melalui jQuery, seperti ini:

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

Jelas, jika Anda memiliki lebih dari satu masukan yang dinonaktifkan, Anda harus mengulang-ulang pemilih yang cocok, dll.


0

Jika seseorang tidak ingin mengaktifkannya, maka nonaktifkan lagi, Anda juga dapat mencoba melakukan ini (Saya memodifikasinya dari kolom Nonaktif yang tidak diambil oleh serializeArray , dari menggunakan plugin menjadi menggunakan fungsi normal):

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

Jadi Anda bisa memanggil mereka seperti ini:

getcomment("#formsp .disabledfield");

1
Saya mencoba fungsi Anda dan tidak menghasilkan nama atau nilai elemen. Lihat contoh di bawah; code 3: {name: undefined, value: ""} 4: {name: undefined, value: ""}
blackmambo

0

Tepat di atas Aaron Hudon:

Mungkin Anda punya sesuatu selain Input (seperti pilih), jadi saya berubah

this.find(":input:disabled")

untuk

this.find(":disabled")
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.