티스토리 뷰
반응형
<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();
});
반응형
'JavaScript & jQuery' 카테고리의 다른 글
[JavaScript] 다수의 객체 $.extend()로 merge (3) | 2021.03.02 |
---|---|
[JavaScript] 원하는 Date 포맷으로 출력 (YYYY-MM-DD HH:mm:ss) (5) | 2021.02.26 |
[JavaScript] Date 객체로 다음 달 마지막 날 출력 (0) | 2021.02.25 |
[JSP] jstl로 현재날짜 및 현재시간 출력 (0) | 2021.02.25 |
[JavaScript] Javascript 동치연산자 ==, === 차이 (0) | 2021.02.10 |