jQuery serialize(), serializeArray() 사용시 동적으로 추가한 element가 빠지는 현상

여러건의 정보를 넣기 위해 동적으로 input element를 생성하고 jQuery.form plugin의 ajaxSubmit()을 사용해 DB에 자료를 저장하도록 했다.
그런데 동적으로 추가된 input element의 정보가 DB에 저장이 되지 않는 증상이 발생되었다.
chrome developer tools의 Network 부분을 보니 request시 아예 넘어가지 않았다.
여러번의 삽질끝에 힌트가 되는 다음 소스를 찾았다.

jquery.form.js

$.fieldValue = function(el, successful) {
…생략…
if (successful && (!n || el.disabled || t==’reset’ || t=’button’ ||
(t == ‘checkbox’ || t == ‘radio’) && !el.checked ||
(t == ‘submit’ || t == ‘image’) && el.form && el.form.clk != el ||
tag == ‘select’ && el.selectedIndex == -1)) {
return null;
}
…생략…
}

jQuery.form plugin은 ajaxSubmit()을 하기 전에 form안의 element들의 value를 추출하는데
이때 위의 소스에 있는 조건에 맞지 않으면 value를 추출하지 않는다.
“jQuery serialize(), serializeArray()시 input element의 value가 추출되지 않는다”라는 질문들에 대해 대부분의 답변은 바로 저 위의 조건을 맞추라는 것이다.
보통은 name attribute가 있어야 하니 추가해라라는 답변이 대부분이긴 하다.

그런데 이번 상황에서는 좀 다른 문제가 발생했다.
소스 중간의 el.form 이 문제였다.
동적으로 추가된 input element의 form property값이 null이어서 value가 추출되지 않았던 것이다.
문제가 있던 소스는 다음과 같다.

<table>
<form name=”frm” id=”regForm”>
<tbody>
<tr>
<td><input type=”text” name=”some1″ value=””/></td>
<td><input type=”text” name=”some2″ value=””/></td>
</tr>
<tr> <!– 동적으로 추가된 tr –>
<td><input type=”text” name=”some1″ value=””/></td>
<td><input type=”text” name=”some2″ value=””/></td>
</tr>
</tbody>
</form>
</table>

console에서 form property값을 찍어본 결과는 다음과 같다.

$(‘input[name=some1]’).eq(0)[0].form
결과 : <form name=”frm” id=”regForm”></form>

$(‘input[name=some1]’).eq(1)[0].form
결과 : null

chrome의 developer tools에서 Elements를 확인해 보니 소스와는 달리 rendering이 되어있었다.

<table>
<form name=”frm” id=”regForm”></form>
<tbody>
<tr>
<td><input type=”text” name=”some1″ value=””/></td>
<td><input type=”text” name=”some2″ value=””/></td>
</tr>
<tr> <!– 동적으로 추가된 tr –>
<td><input type=”text” name=”some1″ value=””/></td>
<td><input type=”text” name=”some2″ value=””/></td>
</tr>
</tbody>
</table>

form tag부분이 한 줄로 붙어버려있다.
특이한 것은 console에서 form property를 찍어보았듯이 동적으로 추가하지 않은 부분의 input element는 정상적으로 value가 추출된다는 것이다.
여튼 이상황을 해결하기 위해 form tag의 위치를 well-formed가 되도록 수정하였다.

<form name=”frm” id=”regForm”>
<table>
<tbody>
<tr>
<td><input type=”text” name=”some1″ value=””/></td>
<td><input type=”text” name=”some2″ value=””/></td>
</tr>
<tr> <!– 동적으로 추가된 tr –>
<td><input type=”text” name=”some1″ value=””/></td>
<td><input type=”text” name=”some2″ value=””/></td>
</tr>
</tbody>
</table>
</form>

console에서 input element의 form property를 다시 찍어보니 정상적으로 출력되었고
value도 정상적으로 추출되었다.
물론 chrome의 developer tools에서 Elements를 확인해도 의도한대로 form tag하위에 table이 들어가 있다.