[jQuery] 팝업창으로 POST 폼 전송하는 방법

HyungJin

9년 ago

팝업창으로 폼을 전송하는 경우가 종종 있어 정리합니다.

<form id="myform" name="myform" method="post" action="popup url" target="popup_window">
  <input name="param1" value="1" />
  <input name="param2" value="2" />
  <input name="param3" value="3" />
  <input name="param4" value="4" />
  <input name="param5" value="5" />
</form>

<button type="button" id="btn_submit">전송</button>

form 구성은 위와 같습니다. 일반적으로 사용할때와 좀 다른 점은 target 을 사용한다는 것인데 이는 frame이나 iframe으로 폼 전송을 할 때도 동일합니다.

<script type="text/javascript">
$(document).ready(function(){
  $("#btn_submit").on("click", function(){
    window.open("", "popup_window", "width=500, height=300, scrollbars=no");
    $("#myform").submit();
  });
});
</script>

전송 버튼을 클릭시 popup_window라는 이름의 빈 팝업창을 띄우고 myform이라는 폼을 submit 시킵니다. form의 target 값을 읽어 popup_window라는 팝업창으로 폼 전송을 하게 됩니다.

get으로 팝업창에 폼 전송을 하는 경우는 url뒤에 파라미터를 넣어주는 것으로 간단하게 해결이 되지만 post의 경우는 이런 방법을 사용해 구현 할 수 있습니다.

자주 쓰진 않는 방법이라 참고하시면 가끔 유용할 수 있습니다.

Share Content