티스토리 뷰

반응형

 

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

 

 

 

 

 

반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함