티스토리 뷰

Web(국비)/JSP

JSP-<form>태그 action속성의 onsubmit

Xion 2019. 10. 23. 17:46

 

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