Form 태그 새로고침 막는법

미니 프로젝트에서 조원 검색 기능을 넣어두고 <Form>태그 속에 버튼을 클릭하면 자꾸 새로고침을 해서 데이터를 받아오지 못했다

이와 같은 문제 해결 방법을 아래와 같은 방법으로 해결했다

$(document).ready(function () {
    show_comment();
    const todoForm = document.getElementById("fix")
    todoForm.addEventListener("submit", handleToDoSubmit)
    function handleToDoSubmit(event) {
        event.preventDefault();
    }
});

todoForm이라는 변수에 <Form>태그의 아이디 값을 넣어주고

todoForm.addEventListener("submit", 함수명)

todoForm 이 이벤트를 발생할 때 "submit"(클릭이나 엔터 등)을 하면 함수명을 같이 실행한다

함수명(event)는 따로 매개변수를 받아오는 곳이 없지만 사용할 수 있다

event.preventDefault();

preventDefault();로 Form에 새로고침을 막아준다