[HTML] form 요소 onsubmit = "return false";
[HTML] form 요소 onsubmit = "return false";
HTML에서 form요소는 자동으로 submit을 자동으로 바인딩 해서 실행하는 기능을 갖고 있다.
때문에 자동으로 submit 되는 것을 막지 않으면 별도의 이벤트를 거는 것과 상관 없이 폼 자체적으로 한번 더 submit을 하게 된다
나는 goSubmit()을 통해 서비스를 정상 처리 한 후 location.href=url로 리다이렉트 처리를 하려고 했는데 해당 함수를 두 번 이상 타게 되니 현재 페이지가 다시 불러와지는 문제가 있었다.
문제가 됐던 코드👇
<!-- goSubmit()을 두번 타게 되는 form -->
<form id="myForm" name="myForm" method="post" action="./test.jsp">
<button type="submit" id="myBtn" name="myBtn" onclick="goSubmit();">
</form>현재 form 요소 안에 submit 타입의 button요소가 들어있고, button은 onclick 으로 goSubmit() 함수가 바인딩되어있다.
여기서 goSubmit()을 한 번만 타게 하고 싶다면 아래와 같이 코드를 수정하면 된다.
해결 방법
button요소를div등으로 변경
<form id="myForm" name="myForm" method="post" action="./test.jsp">
<div id="myBtn" name="myBtn" onclick="goSubmit();">
</form>button의onclick속성에return false;추가
<form id="myForm" name="myForm" method="post" action="./test.jsp">
<div id="myBtn" name="myBtn" onclick="goSubmit(); return false;">
</form>button요소의 submit 타입을 제거하고form요소의 속성에onsubmit="return false;"를 추가
<form id="myForm" name="myForm" method="post" action="./test.jsp" onsubmit="return false;">
<button id="myBtn" name="myBtn" onclick="goSubmit();">
</form>
참고
728x90