[JavaScript] form 태그 안에 동적으로 append된 파라미터 추가

 

<form name="testForm">
    <div id="testForm">
      이름 : <input type="text" value="" name="name" /><br/>
      나이 : <input type="text" value="" name="age" /><br/>
      주소 : <input type="text" value="" name="address" />
    </div>
</form>
<a id="addParam" href="javascript:void(0);">추가</a>
<button type="button" id="submit">저장</button>

 

JavaScript에서 동적으로 html form 안에 input 태그를 추가하면

submit 시에 동적으로 추가된 파라미터를 인식 못하는 경우가 발생한다.

$(document).ready(function() {
    $('#addParam').click(function() {
        const html = '<br/>연락처 : <input type="text" value="" name="tel" />';
        
        $('#testForm').append(html);
    });
});

이럴 땐 form 요소에 serialize()를 통해 직렬화 시켜준 후 전송하면

동적으로 추가된 파라미터까지 모든 값이 서버로 전달된다.

$('#submit').click(function() {
    $('form[name="testForm"]').serialize();
    $('form[name="testForm"]').attr('method', 'POST');
    $('form[name="testForm"]').attr('action', '/tables/save');
        
    $('form[name="testForm"]').submit();
});