submit 을 할 때 target 이 두번 호출이 되는 현상 해결방법

자바스크립트에서 예전에 문의을 많이 받았었고, 검색을 좀 하면 나오는 내용이지만..

 

submit 을 할 때 target 페이지가 두 번 호출되는 문제에 대해 설명하고자 합니다.

 

이 부분의 원인은 웹페이지를 만들 때 submit 속성을 가진 버튼이나 이미지를 사용하지 않고, 일반 버튼이나 이미지를 onclick, href 을 통해서 함수를 호출하게 되고 그 안에서 onsubmit 을 하게 되면. onsubmit 이벤트가 한번 더 발생하게 됩니다. 

 

그래서 저같은 경우는 다양한 개발과 유지관리가 용이해야 하기 때문에 submit 속성을 가진 버튼은 사용하지 않고, onclick을 통해서 처리를 합니다.

 

그러니 당연히 onsubmit 이벤트가 한번 더 발생을 하게 됩니다.

 

이 이부분을 해결하는 법은 form 태그 쓸 때 onsubmit="return false;" 을 넣어줘서 onsubmit 이벤트를 차단하는 방법을 사용하면 target 은 한번만 호출이 되게 됩니다.

 

<form name="write_form" method="post" onsubmit="return false;">

 

위 코드는 form 을 만들 때 제가 사용하는 일반적인 방법입니다.

 

추가로 팁을 하나 더 설명한다면.. 

 

위 form 태그가 웹 상에서 어느정토 크기를 차지한다는 점입니다, 그 공간을 차지하는 것을 없애고자 한다면 style 이나 css에 스타일 속성을 추가해 주면 됩니다,

 

style="padding:0px;margin:0px;"

 

을 넣어주면 공간을 차지 하지 않더라구요.

 

참고하시면 됩니다.