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>
'JavaScript > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 객체를 쿼리스트링으로 변환하기 (0) | 2023.03.09 |
|---|---|
| [Javascript] FormData 객체의 사용 (0) | 2023.02.28 |
| [Javascript] fetch api를 사용한 파일 다운로드 (0) | 2023.02.09 |
| [Javascript] async와 await (0) | 2023.02.09 |
| [Javascript] 비동기 통신을 위한 3가지 방법 (0) | 2023.02.09 |