Jak sprawić, by $ .serialize () brała pod uwagę te wyłączone: elementy wejściowe?


135

Wygląda na to, że domyślnie wyłączone elementy wejściowe są ignorowane przez $.serialize(). Czy jest w pobliżu praca?


To jeszcze dziwniejsze, ponieważ możesz serializować wyłączone, textareaale nie wyłączone input..
daVe

Odpowiedzi:


233

Tymczasowo je włącz.

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
warto rozważyć readonlyzamiast, disabledjak wspomniał Andrew poniżej.
andilabs

93

Użyj wejść tylko do odczytu zamiast wyłączonych wejść:

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

Powinno to zostać odebrane przez serialize ().


Świetnie, tylko uwaga: przycisk przesyłania jest nadal klikalny, gdy jest tylko do odczytu.
André Chalella,

3
wyłączone zapobiega serializacji, ale tylko do odczytu zapobiega sprawdzaniu poprawności
Jeff Lowery

12

Możesz użyć funkcji proxy (wpływa na oba $.serializeArray()i $.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);

Najlepsze rozwiązanie, działa dla zaznaczania, pola wyboru, radia, ukrytych i wyłączonych wejść
Plasebo

9

@ user113716 podał podstawową odpowiedź. Mój wkład to tylko drobiazg z jQuery poprzez dodanie do niego funkcji:

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

Przykładowe użycie:

$("form").serializeIncludeDisabled();

4

Spróbuj tego:

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

Czy mógłby Pan rozwinąć trochę więcej i wyjaśnić OP, dlaczego to działa?
Willem Mulder

Mogę ci to wyjaśnić. Jeśli nadal chcesz mieć wyłączone pole wejściowe (z jakiegokolwiek powodu), ale chcesz również wysłać nazwę wejściową za pomocą metody serialize (). Zamiast tego możesz użyć ukrytego pola wejściowego (z taką samą wartością jak twoje wyłączone pole wejściowe), które serialize () nie ignoruje. Następnie możesz również zachować wyłączone pole wprowadzania dla widoczności.
superkytoz

3

Widzę kilka obejść, ale nadal nikt nie zasugerował napisania własnej funkcji serializacji? Proszę bardzo: 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

Wyłączone elementy wejściowe nie są serializowane, ponieważ „wyłączone” oznacza, że ​​nie powinny być używane zgodnie ze standardem W3C. jQuery po prostu przestrzega standardu, mimo że niektóre przeglądarki tego nie robią. Możesz obejść ten problem, dodając ukryte pole o wartości identycznej z wyłączonym polem lub robiąc to za pomocą jQuery, coś takiego:

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

Oczywiście, gdybyś miał więcej niż jedno wyłączone wejście, musiałbyś iterować po pasujących selektorach itp.


1

W przypadku, gdy ktoś nie chce ich aktywować, a następnie wyłącz je ponownie, możesz również spróbować to zrobić (zmodyfikowałem to z Wyłączonych pól, które nie są odbierane przez serializeArray , z używania wtyczki do używania normalnej funkcji):

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

Możesz więc nazwać je w ten sposób:

getcomment("#formsp .disabledfield");

1
Wypróbowałem twoją funkcję i nie generuje nazwy ani wartości elementów. Zobacz przykład poniżej; code 3: {name: undefined, value: ""} 4: {name: undefined, value: ""}
blackmambo

0

Nieco powyżej Aarona Hudona:

Może masz coś innego niż Input (np. Select), więc zmieniłem

this.find(":input:disabled")

do

this.find(":disabled")
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.