Como faço para que $ .serialize () leve em consideração aqueles elementos de entrada disabled:?


135

Parece que, por padrão, os elementos de entrada desativados são ignorados por $.serialize(). Existe uma solução alternativa?


É ainda mais estranho, porque você pode serializar um desativado textarea, mas não a pessoas com deficiência input..
Dave

Respostas:


233

Ative-os temporariamente.

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
vale a pena considerar em readonlyvez de disabledcomo mencionado por Andrew abaixo.
andilabs

93

Use entradas somente leitura em vez de entradas desativadas:

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

Isso deve ser captado por serialize ().


Ótimo, apenas uma observação: o botão Enviar ainda pode ser clicado quando somente leitura.
André Chalella 7/11

3
desativada impede a serialização, mas a validação impede somente leitura
Jeff Lowery

11

Você pode usar uma função proxy (isso afeta tanto $.serializeArray()e $.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);

Melhor solução, obras para select, checkbox, rádio, entradas escondidas e deficientes
Plasebo

9

@ user113716 forneceu a resposta principal. Minha contribuição aqui é apenas um detalhe do jQuery, adicionando uma função a ele:

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

Exemplo de uso:

$("form").serializeIncludeDisabled();

4

Tente o seguinte:

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

Você poderia elaborar um pouco mais e explicar ao OP por que isso funciona?
Willem Mulder

Eu posso explicar isso para você. Se você ainda deseja ter um campo de entrada desativado (por qualquer motivo), mas também deseja enviar o nome da entrada com o método serialize (). Em vez disso, você pode usar um campo de entrada oculto (com o mesmo valor do seu campo de entrada desativado), que serialize () não ignora. E você também pode manter seu campo de entrada desativado para a visibilidade.
Superkytoz

3

Eu posso ver algumas soluções alternativas, mas ainda assim ninguém sugeriu escrever sua própria função de serialização? Aqui está: 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

Os elementos de entrada desativados não são serializados porque 'desativado' significa que eles não devem ser usados, de acordo com o padrão W3C. O jQuery está apenas cumprindo o padrão, embora alguns navegadores não. Você pode contornar isso adicionando um campo oculto com um valor idêntico ao campo desabilitado ou fazendo isso via jQuery, algo como isto:

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

Obviamente, se você tivesse mais de uma entrada desativada, teria que repetir os seletores correspondentes etc.


1

Caso alguém não queira ativá-los e desativá-los novamente, você também pode tentar fazer isso (modifiquei-o dos campos Disabled não selecionados pelo serializeArray , do plug-in ao uso da função normal):

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

Então você pode chamá-los assim:

getcomment("#formsp .disabledfield");

1
Eu tentei sua função e ela não produz o nome ou valor dos elementos. Veja o exemplo abaixo; code 3: {name: undefined, value: ""} 4: {name: undefined, value: ""}
blackmambo

0

Pouco sobre Aaron Hudon:

Talvez você tenha algo além de Input (como select), então mudei

this.find(":input:disabled")

para

this.find(":disabled")
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.