[HTML/JS] button을 누를 경우, 페이지가 reload 되는 현상

일반 button을 누를 경우, (버튼에 설정해놓은 이벤트 외에 추가로) 페이지가 제멋대로 reload 되는 경우가 있다.

[원인]

button이 form 태그 안에 있을 경우 발생한다.

덧붙여, button의 type 속성의 기본 값은 'submit'이다.

즉, 버튼을 클릭할 경우

<form method="POST">
    <button name="data" type="submit" onclick="getData()">Click</button>
</form>

위와 아래 코드는 같은 동작을 한다.

1 2 3

<form method="POST">     <button name="data" onclick="getData()">Click</button> </form> Colored by Color Scripter

cs

[해결] 

두가지 방법이 있는데, 상황에 따라 적절히 활용하면 될 것이다.

첫번째 방법은, button의 type을 'button'으로 설정하거나,

<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>

두번째는, form 태그를 div로 대체하면 된다.

<div>
    <button name="data" type="button" onclick="getData()">Click</button>
</div>

http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked