form 요소 에서 submit 의 return 값을 컨트롤 하기

보통 form 에서 내부적으로 처리해야할 데이터가 있을경우 자바스크립트 또는 제이쿼리를 이용하게 된다. 하지만 자바스크립트 같은 경우 return 값을 설정해 주어도 기본 sumit 기능을 수행하게 되서 골치가 아플때가 있다. 그럴때에는 form 요소의 속성인 onSubmit 에서 아래와 같이 return 값을 붙여주면, 제대로된 값을 받아서 처리시킬 수 있다.

 자바스크립트 예제

---

<script>
function form_submit()
{
/* confirm 함수는 확인창 결과값으로 TRUE 와 FALSE 값을 return 하게 된다*/
var check_submit=confirm('로그인 하시겠습니까?');

return check_submit;
}
</script>

<form action="/login" onSubmit="return form_submit()" method="post">
<input type="text" name="user_id" class="user_id"/>
<input type="password" name="user_pw" class="user_pw"/>
<input type="submit" value="로그인"/>
</form>

위에서는 자바스크립트의 사용방법을 알아보았고, 아래는 JQUERY 의 사용방법이다. 제이쿼리 같은경우는 일반적으로 아래와 같은 방법으로 사용하여 쉬운 컨트롤을 할 수 있도록 코딩하는편이 좋다.

 제이쿼리 예제

---

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){

$('form').submit(function(){

/* confirm 함수는 확인창 결과값으로 TRUE 와 FALSE 값을 return 하게 된다*/
var check_submit=confirm('로그인 하시겠습니까?');

return check_submit;

})

})
</script>

<form action="/login" method="post">
<input type="text" name="user_id" class="user_id"/>
<input type="password" name="user_pw" class="user_pw"/>
<input type="submit" value="로그인"/>
</form>