[JavaScript] 자바스크립트 폼 전송하기
2022. 7. 16. 03:02ㆍProgram/JavaScript
172_자바스크립트 폼 전송하기
[적용]
- 폼 전송 전 추가 작업을 처리하고 싶을 때
- 폼 전송 전 확인 작업을 하고 싶을 때
[문법]
| 이벤트 | 의미 |
| submit | 폼 전송 시 이벤트 |
[내용]
폼 요소의 submit 이벤트를 감시하여 폼 전송 전 추가 작업을 처리할 수 있다.
해당 이벤트로 폼 전송 전의 데이터를 가공하거나 데이터 전송 여부를 확인할 수 있다.
전송 취소 후 재입력을 요구하고 싶을 때는 event.preventDefault()를 사용해 이벤트를 해제한다.
HTML index.html
<body>
<form>
<label for="myText"> 텍스트를 입력해 주세요.</label>
<input type="text" name="myText" id="myText">
<button>전송하기</button>
</form>
</body>JavaScript main.js
// form 요소 참조
const formElement = document.querySelector('form');
// 전송 이벤트 감시
formElement.addEventListener('submit', handleSubmit);
// 전송 이벤트 발생 시
function handleSubmit(event) {
// confirm으로 전송 확인
const isYes = confirm('이 내용으로 전송하시겠습니까?');
// '취소'를 선택한 경우
if (isYes === false) {
// 이벤트 해제
event.preventDefault();
}
}
실행결과
전송하기를 누르면 확인창이 표시된다.
취소를 선택하면 데이터 재입력이 가능하며, 확인을 선택하면 폼이 전송된다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 CSS Transitions 종료시 작업 처리하기 (0) | 2022.07.18 |
|---|---|
| [JavaScript] 자바스크립트에서 CSS 트랜지션(Transitions), 애니메이션(Animations)사용하기 (0) | 2022.07.16 |
| [JavaScript] 자바스크립트 풀다운(Pull-down) 메뉴 사용하기 (0) | 2022.07.16 |
| [JavaScript] 자바스크립트에서 색상 선택 정보변경 확인하기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기 (0) | 2022.07.15 |