IT/development

[JavaScript] submit control(feat. onsubmit)

알 수 없는 사용자 2022. 11. 22.

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