컴퓨터/HTML

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

dolhim 2016. 9. 7. 15:09

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


[원인]

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



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


즉, 버튼을 클릭할 경우


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


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


1
2
3
<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>
cs



[해결] 


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


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

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


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

1
2
3
<div>
    <button name="data" type="button" onclick="getData()">Click</button>
</div>
cs



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