[Javascript] 자바스크립트로 Form 초기화하기

AJAX 등을 사용해 폼 데이터를 보낸 뒤 성공하면 폼의 모든 내용을 빈칸으로 초기화하고 싶다. 이럴 때는 자바스크립트의 reset 함수를 사용하면 된다.

 

reset 함수는 Form 요소를 대상으로 사용할 수 있다. 선택자를 사용해 Form 태그를 선택한 후 reset()을 사용하면 된다.

 

<form name="targetForm">
    <input type="text" name="userId" />
    <input type="text" name="userPw" />
    <button type="button" onclick="send();">전송</button>
</form>

<script>
function send(){
    const formData = new FormData();
    
    fetch('/test/insert?${_csrf.parameterName}=${_csrf.token}', {
        method: 'post',
        body: formData
    })
        .then(res => res.text())
        .then(text => {
            if(text === 'SUCCESS'){
                document.targetForm.reset();
            }
        });
}
</script>