$ .serialize ()가 비활성화 된 입력 요소를 어떻게 고려합니까?


135

기본적으로 비활성화 된 입력 요소는에 의해 무시되는 것 같습니다 $.serialize(). 해결 방법이 있습니까?


당신은 비활성화 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');

26
아래 Andrew가 언급 한 readonly대신 고려할 가치가 disabled있습니다.
andilabs

93

비활성화 된 입력 대신 읽기 전용 입력을 사용하십시오.

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

이것은 serialize ()에 의해 선택되어야합니다.


참고 : 제출 전용 버튼은 읽기 전용 일 때 여전히 클릭 할 수 있습니다.
André Chalella

3
disabled는 직렬화를 방지하지만 읽기 전용은 유효성 검사를 방지합니다
Jeff Lowery

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);

최상의 솔루션, 선택, 확인란, 라디오, 숨김 및 비활성화 된 입력에 사용
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"/>

좀 더 자세히 설명하고 왜 이것이 작동하는지 OP에 설명해 주시겠습니까?
Willem Mulder

나는 당신을 위해 그것을 설명 할 수 있습니다. 어떤 이유로 든 비활성화 된 입력 필드를 갖고 싶지만 serialize () 메서드를 사용하여 입력 이름을 보내려고합니다. 대신 serialize ()가 무시하지 않는 숨겨진 입력 필드 (비활성화 된 입력 필드와 동일한 값)를 사용할 수 있습니다. 그런 다음 가시성을 위해 비활성화 된 입력 필드를 유지할 수도 있습니다.
superkytoz '12

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);
    }
});

2

'disabled'는 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의해 선택되지 않은 Disabled 필드 에서 수정했습니다 ).

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");

1
함수를 시도했지만 요소 이름이나 값을 생성하지 않습니다. 아래 예를 참조하십시오. code 3 : {name : 정의되지 않음, 값 : ""} 4 : {name : 정의되지 않음, 값 : ""}
blackmambo

0

Aaron Hudon 바로 위에 :

어쩌면 입력과 다른 것 (예 : select)이 있으므로 변경했습니다.

this.find(":input:disabled")

this.find(":disabled")
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.