JAVASCRIPT :: onsubmit

 

onsubmit

→ submit 액션이 발생할 경우 이 때 호출되는 자바스크립트 함수에서

return true 할 경우 action 속성으로 제어권이 넘어가고,

return false 할 경우 action 속성으로 제어권이 넘어가지 않게 된다.

 

 

예시 코드를 보자!!스크립트 코드 ↓

<script type="text/javascript">

	
	function formCheck()
	{
		// 문서의 내용 점검 → 통과 → return true;  → submit 액션 처리로 제어권 넘김
		// 문서의 내용 점검 → 반려 → return false; → submit 액션 처리로 제어권을 넘기지 않고 현재 페이지에 잔류
		
		/*
		점검사항 체크...
		→ 문제 발생(발견)							→ return false;
		→ 문제가 발생하지 않음(발견되지 않음)		→ return true;
		*/
		
		var userId = document.getElementById("userId");
		var userPwd = document.getElementById("userPwd");
		var userName = document.getElementById("userName");
		var userTel = document.getElementById("userTel");
		

		
		if (userId.value == "") 
		{
			userId.focus();
			return false;
		}
		
		if (userPwd.value =="" )
		{
			userPwd.focus();
			return false;
		}
		
		if (userName.value =="" )
		{
			userName.focus();
			return false;
		}
		
		if (userTel.value =="" )
		{
			userTel.focus();
			return false;
		}
		
		return true;
		
	}

</script>

html 코드 ↓

<div>
	<h1>데이터 송수신 실습 04</h1>
	<hr>
</div>
  
 <div>
 	   <form action="Receive04.jsp" method="post" onsubmit="return formCheck();">
      <table class="table">
         <tr>
            <th>아이디(*)</th>
            <td>
               <input type="text" name="userId" id="userId" class="txt">
               <span class="msg" id="idMsg">아이디를 입력하세요.</span>
            </td>
         </tr>
         <tr>
            <th>패스워드(*)</th>
            <td>
               <input type="password" name="userPwd" id="userPwd" class="txt">
               <span class="msg" id="pwMsg">패스워드를 입력하세요.</span>
               
            </td>         
         </tr>
         <tr>
            <th>이름(*)</th>
            <td>
               <input type="text" name="userName" id="userName" class="txt">
               <span class="msg" id="nameMsg">이름을 입력하세요.</span>
            </td>         
         </tr>
         <tr>
            <th>전화번호(*)</th>
            <td>
               <input type="text" name="userTel" id="userTel" class="txt">
               <span class="msg" id="telMsg">전화번호를 입력하세요.</span>
            </td>         
         </tr>
         <tr>
            <th>성별</th>
            <td>
               <label><input type="radio" name="userGender" id="female" value="여성">여성</label>
               <label><input type="radio" name="userGender" id="male" value="남성">남성</label>
            </td>
         </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">
               <!-- button type="submit" class="btn" style="width: 150px; height: 50px;" onclick="functionTest()">회원가입</button> -->
               <button type="submit" class="btn" style="width: 150px; height: 50px;">회원가입</button>
               <button type="reset" class="btn" style="width: 150px; height: 50px;">취소</button>
            </td>
         </tr>
      </table>
   </form>
 </div>

 

위의 코드에서 form 태그 부분을 보면

<form action="Receive04.jsp" method="post" onsubmit="return formCheck();">

onsubmit 속성에 return formCheck();를 넣어주며 함수를 호출하고 그 반환값을 받아오고 있다.

 

return 을 넣어줘야 페이지를 넘어가거나 페이지에 잔류할 수 있다 ~~!!!

return 은 함수 반환값(유효성 결과값) 을 받아오는 통로라고 생각하자 !

 

결국, formCheck( ) return 값이 true 이면 Receive04.jsp 페이지로 넘어가고,

return 값이 false 이면 기존 페이지에 잔류한다.

 

onsubmit 속성을 사용하여 js 영역에서 데이터의 유효성을 검사할 수 있다.