web관련 공부들
JavaScript popup - 2.동적 form생성을 통한 팝업 여러개 띄우기(다중 팝업창)
초코맛
2021. 2. 9. 14:21
반응형
1.동적 form생성이란?
-보통 form태그의 내용을 전송할 때, form.submit(); 또는 input태그의 type="submit" 을 통해 form태그에 들어있는 데이터를 전송하는데, 동적 form 생성을 통하여 HTML에 form태그가 존재하지 않아도 데이터 전송이 가능하다.
-동적 form 생성이 안된다면 아래 예제처럼 form을 만들어 놓은 상태에서 데이터를 담아야 하는데, 만약 전송 할 데이터 갯수가 예측 할 수 없다거나 여러 팝업이 생성되어야 한다면 아래의 코드로는 불가능 하다. 앞의 1.window.open() 에서 설명했듯이 popup의 name이 정해져서 다중으로 열리지 않기 때문이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form submit popup</title>
<script type="text/javascript">
//팝업 오픈
$scope.openPop = function() {
document.getElementById("I_DATA").innerText = '찾았거나 담을 데이터';
document.getElementById("TITLE").innerText = '찾았거나 담을 데이터';
document.getElementById("SEQ").innerText = '찾았거나 담을 데이터';
window.open('', 'popEx', 'width=400, height=600');
$('#frmPopEx').prop('method', 'post').prop('target', 'popEx').prop('action', '${pageContext.request.contextPath}/popEx.co').submit();
};
</script>
</head>
<body>
<div class="win">
<form id="frmPopEx" name="frmPopEx">
<input type="hidden" id="I_DATA" name="I_DATA" value="">
<input type="hidden" id="TITLE" name="TITLE" value="">
<input type="hidden" id="SEQ" name="SEQ" value="">
</form>
<button class="btn blu" ng-click="openPop()">팝업</button>
</div>
</body>
</html>
-위 예제를 동적으로 변경&다중 팝업 소스코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form submit popup</title>
<script type="text/javascript">
//팝업 오픈
$scope.openPop = function() {
//popup수 만큼 for돌리기
var data = '3';
for (var i=0; i<data; i++) {
var seq = i;
window.open('', 'popEx '+seq, 'width=400, height=600');
formSubEx(seq);
}
};
//데이터 전송
function formSubEx(seq){
var form = document.createElement("form");
form.setAttribute("charset", "UTF-8");
form.setAttribute("method", "POST");
form.setAttribute("target", 'popEx '+seq);
form.setAttribute("action", getContextPath() + "/popEx.co");
hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "I_DATA");
hiddenField.setAttribute("id", "I_DATA");
hiddenField.setAttribute("value", "전송데이터1");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "TITLE");
hiddenField.setAttribute("id", "TITLE");
hiddenField.setAttribute("value", "전송데이터2");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "SEQ");
hiddenField.setAttribute("id", "SEQ");
hiddenField.setAttribute("value", seq);
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
}
</script>
</head>
<body>
<div class="win">
<button class="btn blu" ng-click="openPop()">팝업</button>
</div>
</body>
</html>-유동적인 hiddenfileld 값을 전송할때도 for로 돌려 만들면 더 간단하게 생성 할 수 있다.
-물론 Controller에서도 for만큼 던져주어야 할 것.
도움이 되셨다면 로그인하지 않아도 되는 🤍공감 꾹 눌러주세요^^
반응형