form 태그 안에 있는 button 사용 시 리로드!?

 엑셀 업로드 관련 테스트를 하는 도중에.. 문제가 발생했다..ㅠ,ㅠ

 form태그 안에 버튼이 있고, 그 버튼을 클릭하면, 기능은 동작하는데, 

먼가 화면이 다시 불러와지고, 기능이 동작해서 불러온 것들이 없어지는데....

첨에는.. 어리둥절 했다.. 머가 문제인지.. 사실 잘 몰랐다...

하나씩 뒤져보니.. form 태그 밖에 있는 버튼은 문제가 없었다..

알고보니.. form 태그 안에 있는 버튼은.. submit 동작을 하는 것이였다..

form 태그에 action 도 지정 안해놓고 그래서 그런지.. 애꿎은 화면만 다시 불러오더라...

서론이 길었는데, 잠깐 화면을 보면,

 

 

( 테스트용이여서... 너무 없어보이긴 하네요...ㅠ )

 

대충 내용은 엑셀 파일을 선택해서, gO 라는 버튼을 누르면 아래쪽에 있는

셀렉트 박스에 시트 정보를 넣어주는 것입니다.

 

기존에는 위와 같이 단순히 버튼으로 했더니, submit  동작을 해서 문제가 발생한것입니다. 그래서 제가 찾은 해결법은 2가지가 있습니다.

 

첫번째는, button에 type attribute에 button 으로 주는 방법입니다.

 

 

두번째는, form에 onsubmit attribute에 return false 를 주는 방법입니다.

 

 

 

위 처럼 2가지 방법을 사용하면, 폼 안에 버튼을 사용하더라도, submit 처리가 다시 되지 않고, 정상적으로 작동하는 것을 다음과 같이 확인 할 수 있습니다.

 

 

 아 그리고 궁금해서 a 태그도 확인해봤는데, a태그는 문제없이 동작하는 것을 확인 하였습니다. a태그를 확인한 이유는 제 경험상 보통 버튼은 저렇게 버튼 태그보다 a태그에 css를 입혀서 사용 하는 경우가 많아서 테스트 해보았습니다. 기존에는 그래서 a태그로 사용해 몰랐고, 간단하게 테스트하려고 버튼 태그를 하다 보니 이와 같은 현상을 발견할 수 있었던 것 같고, 오늘 또 하나 배워가는 것 같습니다.ㅎ,ㅎ