자바스크립트 폼 Form 전송 버튼 막기 - 페이지 전환 방지

form 태그에서 input을 사용하는 상황에서 버튼을 누르면 페이지가 이동하는데요

원하지 않는 경우가 있을 수 있어요

action 을 지정하지 않거나 #으로만 했는데도 페이지가 깜박거리는데요

 

이것을 방지하기 위한 방법입니다

 

일단 버튼 type을 submit 가 아니라 button 으로 하기만 해도 효과가 있습니다

<button type="button">추가</button>

안전하게 추가해해줘야 할 작업이 event.preventDefault 를 넣는 것입니다

 

<form id="form" action="#" autocomplete="off">
<button id='downloadbutton' type="button" onClick="downloadFile()"></button>
</form>

<script>
const formtag = document.getElementById("form");

// 데이터 전송, 페이지 전환 방지
function handleSubmit(event) {
  event.preventDefault()
}

// 등록
function init() {
  formtag.addEventListener('submit', handleSubmit)
}

</script>

이렇게 하면 버튼을 눌렀을 때 페이지가 깜박거리며 원하지 않는 동작을 방지할 수 있어요