목차
- onsubmit 예제 - 제출 이벤트 (HTML 속성 방식)
- onsubmit 정의
- onsubmit 구문
- onsubmit 예제 - 제출 이벤트 (JS 속성 방식)
- 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.
모든 브라우저 지원.
3.
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>