Comment faire pour que $ .serialize () prenne en compte ces éléments disabled: input?

135

Il semble que les éléments d'entrée désactivés par défaut soient ignorés par $.serialize(). Y at-il un travail autour?

fms
la source
C'est encore plus étrange, car vous pouvez sérialiser un désactivé textareamais pas un désactivé input.
daVe

Réponses:

233

Activez-les temporairement.

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');
utilisateur113716
la source
26
à considérer readonlyau lieu de disabledcomme mentionné par Andrew ci-dessous.
andilabs
93

Utilisez des entrées en lecture seule au lieu d'entrées désactivées:

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

Cela devrait être récupéré par serialize ().

Andrew
la source
Super, juste une note: le bouton d'envoi est toujours cliquable en lecture seule.
André Chalella
3
disabled empêche la sérialisation, mais en lecture seule empêche la validation
Jeff Lowery
12

Vous pouvez utiliser une fonction mandatée (elle affecte à la fois $.serializeArray()et $.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
la source
Meilleure solution, fonctionne pour sélectionner, case à cocher, radio, entrées masquées et désactivées
Plasebo
9

@ user113716 a fourni la réponse principale. Ma contribution ici est juste une subtilité jQuery en y ajoutant une fonction:

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

Exemple d'utilisation:

$("form").serializeIncludeDisabled();
Aaron Hudon
la source
4

Essaye ça:

<input type="checkbox" name="_key" value="value"  disabled="" />
<input type="hidden" name="key" value="value"/>
KennyKam
la source
Pourriez-vous s'il vous plaît élaborer un peu plus et expliquer au PO pourquoi cela fonctionne?
Willem Mulder
Je peux vous l'expliquer. Si vous voulez toujours avoir un champ d'entrée désactivé (pour une raison quelconque), mais vous voulez également envoyer le nom d'entrée avec la méthode serialize (). Ensuite, à la place, vous pouvez utiliser un champ d'entrée masqué (avec la même valeur que votre champ d'entrée désactivé), que serialize () n'ignore pas. Et puis vous pouvez également conserver votre champ de saisie désactivé pour la visibilité.
superkytoz
3

Je peux voir quelques solutions de contournement, mais personne n'a encore suggéré d'écrire votre propre fonction de sérialisation? Ici vous allez: 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
la source
2

Les éléments d'entrée désactivés ne sont pas sérialisés car «désactivés» signifie qu'ils ne doivent pas être utilisés, selon la norme W3C. jQuery respecte simplement la norme, même si certains navigateurs ne le font pas. Vous pouvez contourner ce problème, en ajoutant un champ masqué avec une valeur identique au champ désactivé, ou en le faisant via jQuery, quelque chose comme ceci:

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

De toute évidence, si vous aviez plusieurs entrées désactivées, vous devrez parcourir les sélecteurs correspondants, etc.

Jason Lewis
la source
1

Au cas où quelqu'un ne voudrait pas les activer, puis les désactiver à nouveau, vous pouvez également essayer de le faire (je l'ai modifié à partir des champs désactivés non repris par serializeArray , de l'utilisation d'un plugin à l'utilisation d'une fonction normale):

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

Vous pouvez donc les appeler comme ceci:

getcomment("#formsp .disabledfield");
maximran
la source
1
J'ai essayé votre fonction et elle ne produit pas le nom ou la valeur des éléments. Voir l'exemple ci-dessous; code 3: {name: undefined, value: ""} 4: {name: undefined, value: ""}
blackmambo
0

Juste au-dessus d'Aaron Hudon:

Peut-être que vous avez autre chose que Input (comme select), alors j'ai changé

this.find(":input:disabled")

à

this.find(":disabled")
Carl Verret
la source