Javascript - form태그 내부 ajax처리시 2번 전송되는 현상

<form>
    <input type="text" name="user_name">
    <button id="save">저장</button>
</form>

과 같은 코드가 있을때 jquery를 활용하여

 

아래처럼 클릭이벤트에 따른 ajax동작을 정의하고, 비동기처리를 하려고 한다.

$("#save").click(function(){
 ...ajax 동작
})

ajax에서는 user_name값을 파라미터로 가지고 컨트롤러로 넘겨서 DB에 저장하는 로직을 구성하였는데,

컨트롤러에 요청이 2번씩 가는 현상을 한번씩 볼 수 있다.

 

form태그 내부의 button이 default동작인 submit으로 동작하면서 form동작 + ajax동작이 동시에 일어났기 때문이다.

 

가장 간단한 해결책은 button을 submit이 아닌 button이라고 지정을 해주는 것이다.

 

---

type="button" 지정하기

<button type="button" id="save">저장</button>

 

---

 

또는 form태그 내부의 모든 버튼이 submit 동작을 하지 않도록 form태그에 속성을 추가하면 된다.

form태그 자동 submit 끄기 (autocomplete="off")

<form autocomplete="off">
   ...
</form>