JQuery form serialize 값 변경

$.ajax() 데이터 전송할 때 주로 form input 데이터를 serialize() 해서 파라미터로 전송하는 방식을 적지 않게 쓴다.

$.ajax({

    type : 'POST',

    url : '/some/post/url',

    data : $('#formId').serialize(),

    success : function (result) {

        ....

    },

    ....

});

위에서 serialize() 된 놈의 특정 값을 별도로 핸들링 해야 하는 경우가 있다.

예를 들면 아래 상황  : {

    input 에 입력한 값을 submit() 직전에 변경하고 싶은데 ...

    1. 전송할 form input element 가 졸라게 많을 때 일일이 new object  { key : value, ... } (json) 으로 노가다 생성하기 힘들 때

    2. type="text" 으로 노출되는 input 에 변경된 값이 노출되게 하고 싶지 않을 때 (노출은 원문, 전송은 암호문 처리 등)

    (2 번을 대체할 hidden input 으로 따로 쓴다던지.. 하는 방식도 안 쓴다고 할 때)

}

 

$('#formId').serializeArray() 를 응용하여 다음과 같이 특정 key 값에 해당하는 value 값을 동적으로 핸들링 할 수 있다.

(array 반복 탐색하면서 key 값과 매칭하여 value 를 변경해주는 방식)

 

[usage]

var formData = $('#formId').serializeArray();

formData = changeSerialize(formData, '변경할inputName', '변경될inputValue'');

 

[function]

function changeSerialize( values, k, v ) {

    var found = false;

    for (i = 0; i < values.length && !found; i++) {

        if ( values[i].name == k ) { 

            values[i].value = v;

            found = true;

        }

    }

    if (!found) {

        values.push(

            {

                name: k,

                value: v

            }   

        );

    }

    return values;

}