티스토리 뷰


일반 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

댓글
댓글쓰기 폼
공지사항
Total
135,130
Today
14
Yesterday
201
«   2019/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
글 보관함