[javascript] jQuery의 form.serialize를 사용하지만 빈 필드를 제외하는 방법

Program / 글쓴이

GET을 통해 제출하는 여러 텍스트 입력 및 드롭 다운이있는 검색 양식이 있습니다. 검색이 수행 될 때 쿼리 문자열에서 빈 필드를 제거하여 더 깨끗한 검색 URL을 갖고 싶습니다.

var form = $("form");
var serializedFormStr = form.serialize();
// I'd like to remove inputs where value is '' or '.' here
window.location.href = '/search?' + serializedFormStr

jQuery를 사용하여 어떻게 할 수 있는지 아십니까?

답변

jQuery 문서를 살펴 보았고 선택기를 사용하여 한 줄로 할 수 있다고 생각합니다 .

$("#myForm :input[value!='']").serialize() // does the job!

분명히 #myForm은 ID가 “myForm”인 요소를 가져 오지만 처음 에는 하위 연산자 이므로 #myForm과 : input 사이에 공백 문자 가 필요하다는 것이 처음에는 명확 하지 않았습니다 .

: input 은 모든 입력, 텍스트 영역, 선택 및 단추 요소와 일치합니다.

[value! = ”] 는 필터가 같지 않은 속성입니다. 이상하고 유용한 점은 모든 : input 요소 유형에는 선택 및 확인란 등의 값 속성이 있다는 것입니다.

마지막으로 값이 ‘.’인 입력도 제거합니다. (질문에서 언급했듯이) :

$("#myForm :input[value!=''][value!='.']").serialize()

이 경우 병치, 즉 서로 옆에 두 개의 속성 선택기를 배치 하는 것은 AND를 의미합니다. 쉼표 사용 은 OR을 의미합니다. 그것이 CSS 사람들에게 명백하다면 죄송합니다!

답변

Tom의 솔루션을 작동시킬 수 없었지만 (?) .filter()짧은 함수를 사용하여 빈 필드를 식별 할 수있었습니다 . jQuery 2.1.1을 사용하고 있습니다.

var formData = $("#formid :input")
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize();

답변

이것은 나를 위해 작동합니다.

data = $( "#my_form input").filter(function () {
        return !!this.value;
    }).serialize();

답변

정규식으로 할 수 있습니다 …

var orig = $('#myForm').serialize();
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '')

테스트 사례 :

orig = "a=&b=.&c=&d=.&e=";
new => ""

orig = "a=&b=bbb&c=.&d=ddd&e=";
new => "b=bbb&d=ddd&"  // dunno if that trailing & is a problem or not

답변

위의 솔루션을 사용했지만 저에게는 효과가 없었습니다. 그래서 다음 코드를 사용했습니다.

$('#searchform').submit(function(){

            var serializedData = $(this).serializeArray();
            var query_str = '';

            $.each(serializedData, function(i,data){
                if($.trim(data['value'])){
                    query_str += (query_str == '') ? '?' + data['name'] + '=' + data['value'] : '&' + data['name'] + '=' + data['value'];
                }
            });
            console.log(query_str);
            return false;
        });

누군가에게 유용 할 수 있습니다.

답변

jQuery의 소스 코드를 살펴 보겠습니다. 최신 버전 라인 3287.

“serialize2″및 “serializeArray2″함수를 추가 할 수 있습니다. 물론 의미있는 이름을 지정하십시오.

또는 더 좋은 방법은 serializedFormStr에서 사용되지 않는 변수를 가져 오는 무언가를 작성하는 것입니다. 중간 문자열에서 = &를 찾거나 = 정규식 마법사로 끝나는 일부 정규식?

업데이트 :
나는 rogeriopvl의 대답을 더 좋아합니다 (+1) … 특히 지금 좋은 정규식 도구를 찾을 수 없기 때문에.

답변

Rich의 솔루션에 대한 대안 :

$('#form').submit(function (e) {
  e.preventDefault();

  var query = $(this).serializeArray().filter(function (i) {
    return i.value;
  });

   window.location.href = $(this).attr('action') + (query ? '?' + $.param(query) : '');
});

설명 :

  • .submit()양식의 submit이벤트에 연결
  • e.preventDefault() 양식 제출을 방지합니다.
  • .serializeArray() 전송 될 쿼리 문자열의 배열 표현을 제공합니다.
  • .filter() 해당 배열에서 거짓 (빈 포함) 값을 제거합니다.
  • $.param(query) 업데이트 된 배열의 직렬화 된 URL 호환 표현을 생성합니다.
  • window.location.href요청 을 보낼 값 설정