form 태그 submit시 페이지 이동 막기

안녕하세요. 엔젤루스입니다.

최근에 일을 하던중에 기존에 만들어져 있던 프로그램중에 form 태그로 submit 시키는 기능이 있었습니다.

저장후 화면 이동으로 여간 불편한게 아니었습니다.

그래서 이건 고쳐야겠다 생각해서 첨에는 Ajax로 바꿔 볼까 했는데 이건 또 로직이 다 변경되어야 하는 문제가 생기더군요.

그래서 submit을 해도 페이지 이동이 일어나지 않는 방법이 없을까 생각해봤는데 많은 분들이 같은 생각을 하셨더라고요.

그래서 알아낸 방법은 다음과 같습니다.

iframe을 이용하는 것입니다.

<iframe id="iframe1" name="iframe1" style="display:none"></iframe>

다음과 같이 iframe을 하나 만들고 display:none을 하여 보이지 않게 처리합니다.

그리고 form 태그에 targer을 해당 iframe의 아이디를 넣으면 처리가 완료됩니다.

<form id="form" name="form" method="post" target="iframe1">

 

이상 form 태그 submit시 페이지 이동을 막는 소스를 확인해 봤습니다.

 

감사합니다.