[DOM_Event] JS - submit 이벤트 (= onsubmit 속성) - 제출/전송 이벤트 (= 서브밋 이벤트 = 서브미트 이벤트 = 온서브밋 속성 = 온서브미트 속성)

목차

1. onsubmit 예제 - 제출 이벤트 (HTML 속성 방식)
2. onsubmit 정의
3. onsubmit 구문
4. onsubmit 예제 - 제출 이벤트 (JS 속성 방식)
5. onsubmit 예제 - 제출 이벤트 (JS 메서드 방식)

onsubmit 예제 - 제출 이벤트 (HTML 속성 방식)

 

<form action="/action_url.php" onsubmit="homzzang()">

  이름 입력: <input type="text" name="mb_name">

  <input type="submit" value="확인">

</form>

<script>

function homzzang() {

  alert("제출 완료");

}

</script>

 

onsubmit 정의

 

폼(form)이 제출(submit)될 때 이벤트 발생.

 

---

 

1,

• 이벤트확산: O
• 취소가능성: O
• 이벤트타입: Event
• 지원HTML: <form>
• DOM버전: Level 2 Events

 

2. 주의사항

<form> 태그의 onsubmit 이벤트 발생 시, event.target (=이벤트 발생시킨 요소)은 <input> 태그가 아니라 <form> 태그임.

 

3.

모든 브라우저 지원.

 

4.

HTML form / JS form / PHP form 부분도 함께 공부 필요.

 

• HTML : method 속성 (get 방식, post 방식)
• JS : 입력값 유효성 검증
• PHP : action_url.php 작성법 ($_GET, $_POST, $_REQUEST 등)

  

onsubmit 구문

 

HTML 속성 방식

<element onsubmit="homzzang()">

 

JS 속성 방식

object.onsubmit = function(){homzzang()};

 

JS 메서드 방식

object.addEventListener("submit", homzzang);

 

---

PS.

 

1. 

함수명 적는 부분에 JS 실행코드 직접 추가 가능.

 

2.

addEventListener() 메서드 방식 주의사항 ★

• IE9 이상 지원.
• 이벤트명에 on  추가 X
• 함수명에 소괄호 추가 X

  

onsubmit 예제 - 제출 이벤트 (JS 속성 방식)

 

<form id="hz" action="/action_url.php">

  이름 입력: <input type="text" name="mb_name">

  <input type="submit" value="확인">

</form>

<script>

document.getElementById("hz").onsubmit = function() {homzzang()};

function homzzang() {

  alert("입력 완료");

}

</script>

 

onsubmit 예제 - 제출 이벤트 (JS 메서드 방식)

 

<form id="hz" action="/action_url.php">

  이름 입력: <input type="text" name="mb_name">

  <input type="submit" value="확인">

</form>

<script>

document.getElementById("hz").addEventListener("submit", homzzang);

function homzzang() {

  alert("입력 완료");

}

</script>