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?

fms
źródło
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');
user113716
źródło
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 ().

Andrzej
źródło
Ś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);
Krzysiek
źródło
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();
Aaron Hudon
źródło
4

Spróbuj tego:

<input type="checkbox" name="_key" value="value"  disabled="" />
<input type="hidden" name="key" value="value"/>
KennyKam
źródło
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);
    }
});
David162795
źródło
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.

Jason Lewis
źródło
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");
maximran
źródło
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")
Carl Verret
źródło