본문 바로가기
📚Study Note/JSP Servlet

[ JSP ] 데이터전송(html → jsp) │ onsubmit │ onchange

칠칠라 2021. 5. 11. 17:52

 

회원가입 버튼을 클릭하면 필수로 입력해야 하는 아이디, 패스워드, 이름, 전화번호가 입력되어 있는지 검사를 하고 

만약 그렇지 않다면 submit을 하지 않도록 해야 한다. 즉, 다음 페이지로 데이터가 넘어가지 않도록 해줘야 한다. 

이것은 onsubmit = "return 함수명()" 으로 가능하다. 만약 submit 이벤트가 발생하게 되면 함수를 호출하게 되는데 이 함수의 return 값이 true 이면 그대로 진행, false 를 return 하게 된다면 진행이 멈추게 된다. 

  • return false; 는 현재 페이지에 그대로 남아있음
  •  return true; 는 요청 페이지로 제어권 이전
<body>
	<div>
		<form action="Receive04.jsp" method="post"
			onsubmit="return inputConfirm()">
			<table>
				<tr>
					<th>아이디</th>
					<td><input type="text" id="userId" name="userId" placeholder="ex)duckduck"> 
						<span class="msg" id="idMsg">아이디를 입력하세요</span>
					</td>
				</tr>
				<tr>
					<th>패스워드</th>
					<td><input type="password" id="password" name="password"
						placeholder="ex)tiger"> <span class="msg" id="pwdMsg">
                        패스워드를 입력하세요</span></td>
				</tr>
				<tr>
					<th>이름</th>
					<td><input type="text" id="UserName" name="UserName"
						placeholder="ex)이유림"> <span class="msg" id="nameMsg">
                        이름을 입력하세요</span></td>

				</tr>

				<tr>
					<th>전화번호</th>
					<td><input type="text" id="tel" name="tel"
						placeholder="ex)010-1111-1111" onclick="nullCheck()"> <span
						class="msg" id="telMsg">전화번호를 입력하세요</span></td>
				</tr>
				<tr>
					<th>성별</th>
					<td><label> <input type="radio" name="gender"
							id="female" value="여자">여자
					</label> <label> <input type="radio" name="gender" id="male"
							value="남자">남자
					</label></td>
				</tr>
				<tr>
					<th>지역</th>
					<td><select name="region">
							<option value="서울">서울</option>
							<option value="대전">대전</option>
							<option value="대구">대구</option>
							<option value="광주">광주</option>
					</select></td>
				</tr>
				<tr>
					<th>수강과목</th>
					<td><label><input type="checkbox" name="subject" id="check1" value="자바기초">자바기초</label> 
                    	<label><input type="checkbox" name="subject" id="check2" value="오라클중급">오라클중급</label>
						<label><input type="checkbox" name="subject" id="check3" value="JDBC심화">JDBC심화</label> 
                   		<label><input type="checkbox" name="subject" id="check4" value="JSP활용">JSP활용</label>
					</td>
				</tr>
				<tr>
					<th colspan="2">
						<button type="submit" class="btn"style="width: 150px; height: 50px;">회원가입</button>
						<button type="reset" class="btn" style="width: 150px; height: 50px;">취소</button>
					</th>
				</tr>
			</table>
		</form>
	</div>



</body>

'패스워드를 입력하세요' 와 같은 안내메시지의 class 속성은 모두 msg 로 되어있다. 보이지 않도록 되어 있다가 특정상황에서 보이도록 만들어줄 것이다.

 

 

- 스크립트 함수를 통해서 만약 조건에 부합하지 않는다면(아이디 등 필수조건이 입력되지 않았다면) return false;

 

- 안내메세지는 display : none 으로 기본 설정

- 만약 아이디가 입력되지 않았다면 idMsg.style.display = "inline";

- 각각의 항목이 입력되지 않은 경우마다 한 개씩 안내메시지가 떠야하므로

함수의 초반에 다시 idMsg.style.display = "none"; 을 통해 초기설정대로 되돌려줘야 한다. 

(그렇지 않으면 아이디는 입력되었고 비밀번호는 입력되지 않은 상황에서 아이디를 입력하라는 메시지와 비밀번호를 입력하라는 메세지가 동시에 보이게 된다. )

 

 

<style type="text/css">
.msg {
	color: red;
	font-size: small;
	display: none; /* 기본으로 안보이게 설정('아이디를 입력하세요' 와 같은 안내문구들 )*/
tr {
} 
	height: 20px;
}

input:focus {
	background-color: #eee;
}
</style>
<script type="text/javascript">
	function inputConfirm()
	{
		var userId = document.getElementById("userId");
		var password = document.getElementById("password");
		var UserName = document.getElementById("UserName");
		var tel = document.getElementById("tel");

		var idMsg = document.getElementById("idMsg");
		var pwdMsg = document.getElementById("pwdMsg");
		var nameMsg = document.getElementById("nameMsg");
		var telMsg = document.getElementById("telMsg");

		idMsg.style.display = "none";
		pwdMsg.style.display = "none";
		nameMsg.style.display = "none";
		telMsg.style.display = "none";

		if (userId.value == "")
		{
			//alert("아이디를 입력하세용!");

			idMsg.style.display = "inline";
			userId.focus();
			return false;

		}

		if (password.value == "")
		{
			//alert("비밀번호를 입력하세용!");
			pwdMsg.style.display = "inline";
			password.focus();
			return false;

		}

		if (UserName.value == "")
		{

			//alert("이름을 입력하세용!");
			nameMsg.style.display = "inline";
			UserName.focus();
			return false;

		}

		if (tel.value == "")
		{
			//alert("전화번호를 입력하세용!");
			telMsg.style.display = "inline";
			tel.focus();
			return false;

		}

		return true;
	}
</script>

 

 만약 ,submit 버튼없이 이벤트 처리를 할 수 있도록 하려면 어떻게 해야 할까?

예를 들어 셀렉트박스를 선택만 해도 바로 다음 페이지로 데이터가 전송되는 상황을 바랄 때는

<form> 으로 둘러싸인 <select>에 onchange = "함수명(this.form)" 속성을 주면 된다.

즉 form 객체를 함수의 매개변수로 넘겨주고 함수에서는 그것을 submit() 하게 되는 것이다. 

<script type="text/javascript">
	function submit(obj)
	{
		obj.submit(); // obj 변수에는 form 객체가 저장되어 있다. 폼.submit() 함수호출을 통해 데이터를 서버로 전송하는 것이 가능하다. 
		
		// 필요에 따라 전송하기 전에 검증 절차를 추가하는 것이 가능하다. 
		// 여기다가 이름을 써야 하는데 안썼어~ 그러면 return false 해주면 되는거고~~
		
	}


</script>

 

만약 위의 예시들과 달리 <form action="~~~" method="get">

이 아닌 

<form action="" method="get"> 으로 구성하게 될 경우 

이전 페이지는 자기 자신이고 데이터를 전송하는 페이지도 자기 자신이다. 

즉 자신이 보내고 자신이 받는 상황이 되는 것이다. 

<!-- form 의 action 속성을 action="" 과 같이 구성하면 페이지 요청 및 
데이터 전송에 대한 수신처는 자기 자신이다. 
form 의 action 속성을 생략하여 지금처럼 form method="post" 와 같이 구성하더라도
페이지 요청 및 데이터 전송에 대한 수신처는 자기 자신, 이전페이지는 자기 자신이다.-->
	
	<form method="post">

 

따라서 스크립트릿 영역에서 데이터를 name 속성으로 받을 수 있다.

<%
	String temp = request.getParameter("userInput");
%>

여기서 temp 를 출력해보았을 때 페이지 최초 요청 시에는 null 이며

페이지에서 데이터를 입력하게 되면 그 데이터로 변경된다. (2을 입력하면 null → 2  로 변경)

 

 

 

 

 

 

'📚Study Note > JSP Servlet' 카테고리의 다른 글

[ JSP&Servlet] 쿠키 Cookie 설정 및 삭제  (0) 2021.05.20
[ JSP ] 세션Session 을 활용한 페이지 간 데이터 이동 │ session.setAttribute() │ session.getAttribute()  (0) 2021.05.19
[ JSP & SERVLET] 포워딩(Forwarding) 과 리다이렉트(Redirect) │ jsp의 두 가지 페이지 전환 기능의 차이  (0) 2021.05.12
[ JSP ] 달력을 출력하는 JSP 페이지 │ select box 선택 시 │ 단독페이지  (0) 2021.05.12
[ JSP ] get 방식과 post 방식 비교  (0) 2021.05.10

'📚Study Note/JSP Servlet' Related Articles

티스토리툴바