- JSP-<form>태그 action속성의 onsubmit 목차
Send08.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send08.jsp</title>
<link rel="stylesheet" type ="text/css" href="css/main.css">
<style type="text/css">
.msg{color: red; font-siae: small; display : none;}
input:focus{background-color: #eee;}
</style>
<script type="text/javascript">
//서버의 제어권을 formCheck()를 통해서 조절 할 수 있다.
function formCheck()
{
/* return false; */
/* return true; */
/*
점검사항 체크
- 문제 발생 → return false;
- 이상 없음 → return true;
*/
var userId = document.getElementById("userId");
var userPwd = document.getElementById("userPwd");
var userName = document.getElementById("userName");
var userTel = document.getElementById("userTel");
//span태그 개별 컨트롤을 위하여 선언
var idMsg = document.getElementById("idMsg");
var pwdMsg = document.getElementById("pwdMsg");
var nameMsg = document.getElementById("nameMsg");
var telMsg = document.getElementById("telMsg");
//최초 페이지 로드시 none을 설정했지만, 밑에 if문을 통하여 display로 변경된상황
//따라서 다시 none으로 설정해줘야한다.
idMsg.style.display="none";
pwdMsg.style.display="none";
nameMsg.style.display="none";
telMsg.style.display="none";
//만약 id가 입력되지 않았으면
if (userId.value =="")// 아이디가 입력되지 않은 상황
{
//아이디가 입력되지 않은 상황 즉,빈문자열이면 아이디입력이 안된상태
//alert("아이디가 입력되지 않은 상황");
idMsg.style.display = "inline";
//인라인 요소로 렌더링 블락으로 할 경우 안됨 테이블이 같이 있기 때문에
userId.focus();
return false; //요청페이지로 넘어가지 않게 하기 위해 선언 위에 return을 주석처리 했기 때문.
}
//독립적인 if 구문으로 구성해야함
if (userPwd.value =="")// 패스워드가 입력되지 않은 상황
{
pwdMsg.style.display = "inline";
userPwd.focus();
return false;
}
if (userName.value =="")// 이름 입력되지 않은 상황
{
nameMsg.style.display = "inline";
userName.focus();
return false;
}
if (userTel.value =="")// 전화번호가 입력되지 않은 상황
{
telMsg.style.display = "inline";
userTel.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>JSP 를 이용한 데이터 송수신 실습</h1>
<hr>
</div>
<div>
<h2>Send08.jsp ●→ Receive08.jsp ○</h2>
</div>
<div>
<!-- <form action="Receive08.jsp" method="post" onsubmit="return true;">
<form action="Receive08.jsp" method="post" onsubmit="return false;"> -->
<form action="Receive08.jsp" method="post" onsubmit="return formCheck();">
<table class = "tbl">
<tr>
<th>아이디(*)</th>
<td>
<input type="text" id="userId" name="userId">
<span class ="msg" id="idMsg">아이디를 입력해주세요.</span>
</td>
</tr>
<tr>
<th>패스워드(*)</th>
<td>
<input type="password" id="userPwd" name="userPWd">
<span class ="msg" id="pwdMsg">패스워드를 입력해주세요.</span>
</td>
</tr>
<tr>
<th>이름(*)</th>
<td>
<input type="text" id="userName" name="userIName">
<span class ="msg" id="nameMsg">이름을 입력해주세요.</span>
</td>
</tr>
<tr>
<th>전화번호(*)</th>
<td>
<input type="text" id="userTel" name="userTel">
<span class ="msg" id="telMsg">전화번호를 입력해주세요.</span>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<label>
<input type="radio" id="female" name="userGender" value="여자">
여자
</label>
<label>
<input type="radio" id="male" name="userGender" value="남자">
남자
</label>
</td>
</tr>
</tr>
<tr>
<th>지역</th>
<td>
<select id = "userCity" name="userCity" >
<option value="마포">마포구</option>
<option value="은평">은평구</option>
<option value="강서">강서구</option>
<option value="구로">구로구</option>
</select>
</td>
</tr>
<tr>
<th>수강과목</th>
<td>
<label>
<input type ="checkbox" name="userSubject" id="check1" value="자바기초">
자바기초
</label>
<label>
<input type ="checkbox" name="userSubject" id="check2" value="오라클중급">
오라클중급
</label>
<label>
<input type ="checkbox" name="userSubject" id="check3" value="JDBC심화">
JDBC심화
</label>
<label>
<input type ="checkbox" name="userSubject" id="check4" value="JSP활용">
JSP활용
</label>
</td>
</tr>
<tr>
<td colspan="2">
<br>
<button type="submit" class="btn" style="width: 250px; height: 40px; font-size: 15pt;">회원가입</button>
<button type="reset" class="btn" style="width: 250px; height: 40px; font-size: 15pt;">취소</button>
<br><br>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>결론은 이렇습니다.
Onsubmit에 의해 자동호출된 함수가 어떠한 값(false, true)을 반환하느냐에 따라 action의 동작 / 미동작이
결정되고 그 것은 바로 form이 실행되느냐 아니냐하는 최종제어를 하게 되는것입니다.
'Web(국비) > JSP' 카테고리의 다른 글
| JSP-만년달력 submit버튼 없이 처리하기 (0) | 2019.10.24 |
|---|---|
| JSP-submit없이 action을통해 select폼 넘겨주기 (0) | 2019.10.24 |
| JSP-데이터 송수신 실습 (테이블 생성 활용) (0) | 2019.10.23 |
| JSP-데이터 송수신 실습(select활용) (0) | 2019.10.23 |
| JSP-체크박스를 통한 getParameterValues 값 받아오기 (0) | 2019.10.23 |