반응형
목차
JavaScript onsubmit 😄
미래의 내가 보기 위해 작성
화면에서 submit을 컨트롤 해야 할 경우가 있다.
예를 들면 입력값을 입력 안하면 못 넘어가게 한다거나..
여러 방법이 있겠지만 form에 onsubmit 옵션을 주고 함수를 지정해 주면 submit 시 무조건 해당 함수를 호출하고 submit하게 된다.
그리고 return functionName(); 을 주게 되면 해당 함수의 return값이 false인 경우 submit이 안된다.
그래서 아래 예시처럼 조건에 따라 submit을 하거나 막을 수 있다.
아래 예시는 제목을 입력 안할 경우 submit이 안된다.(너무 단순한 유효성 체크이지만..)
예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onsubmit test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<form action="board/new" method="post" onsubmit="return check();">
<div class="form-group">
<label for="title"></label>
제목: <input id="title" type="text" name="title"> <br>
내용: <input id="contents" type="text" name="contents"> <br>
작성자: <input id="writer" type="text" name="writer"> <br>
</div>
<button type="submit">전송</button>
</form>
<script>
$(document).ready(function() {
});
function check() {
let title = $("#title").val();
if(title === "" || title === undefiend || title === " ") {
alert("제목은 필수값입니다. 입력 안하면 넘어갈 수 없습니다.");
return false;
}
}
</script>
</body>
</html>
이를 이용해서 다양하게 응용이 가능하다.
반응형
'IT > development' 카테고리의 다른 글
| [mybatis] 상세 조회 시 복수값 추가 조회(feat. vo & map) (0) | 2022.11.22 |
|---|---|
| [JavaScript] Ajax 결과값 변수 저장 (0) | 2022.11.22 |
| [spring Boot] Request method 'POST' not supported(feat. thymeleaf) (0) | 2022.11.22 |
| [jQuery] jQuery.ajax() 사용법 예시(feat. 댓글 페이지네이션) (0) | 2022.11.21 |
| [IDE] intellJ IDEA live template 생성 (0) | 2022.11.21 |