Как сделать так, чтобы $ .serialize () учитывал те отключенные элементы: input?

135

Кажется, по умолчанию отключенные элементы ввода игнорируются $.serialize(). Есть ли обходной путь?

FMS
источник
Это даже страннее, потому что вы можете сериализовать отключенного, 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');
user113716
источник
26
стоит рассмотреть readonlyвместо того, disabledчто упомянуто Андреем ниже.
andilabs
93

Используйте входы только для чтения вместо отключенных входов:

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

Это должно быть получено с помощью serialize ().

Андрей
источник
Отлично, просто примечание: кнопка «Отправить» по-прежнему активна только для чтения.
Андре Шалелья
3
отключено предотвращает сериализацию, но только чтение предотвращает проверку
Джефф Лоури
12

Вы можете использовать функцию прокси (она влияет на оба $.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);
Krzysiek
источник
Лучшее решение, работает для выбора, флажок, радио, скрытые и отключенные входы
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"/>
KennyKam
источник
Не могли бы вы рассказать немного подробнее и объяснить ОП, почему это работает?
Виллем Малдер
Я могу объяснить это для вас. Если вы все еще хотите иметь отключенное поле ввода (по какой-либо причине), но вы также хотите отправить имя ввода с помощью метода serialize (). Тогда вместо этого вы можете использовать скрытое поле ввода (с тем же значением, что и у вашего отключенного поля ввода), которое serialize () не игнорирует. И тогда вы также можете оставить свое отключенное поле ввода для видимости.
суперкитоз
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);
    }
});
David162795
источник
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 , от использования плагина к использованию обычной функции):

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");
maximran
источник
1
Я попробовал вашу функцию, и она не выдает имя элемента или значение. Смотрите пример ниже; code 3: {name: undefined, value: ""} 4: {name: undefined, value: ""}
blackmambo
0

Прямо над Аароном Худоном:

Может быть, у вас есть что-то, кроме ввода (например, выберите), поэтому я изменил

this.find(":input:disabled")

в

this.find(":disabled")
Карл Верре
источник