티스토리 뷰

개발스토리/HTML

Form태그 onsubmit의 올바른 사용

적자유유자적 2013. 3. 6. 09:30

옳은 예 - submit버튼 type을 button이 아니라 'submit' 이라는 것에 주의하자!!!!
type을 button으로 하거나 onclick 이벤트로 submit을 처리하면 엔터를 누를 경우나 모바일웹서비스에서 키패드로 서브밋이 불가능하기 때문이다.!!!

put type='submit'을 누르면 submit이 동작하면서 frmsubmit()실행하다 예외처리가 나면 return false에 의해 멈춘다.
예외처리에 걸리지 않으면 return true가 되서 onsumit이 동작하게 된다.

<form name='frm' method='post' actoin='./' onsubmit='return frmsubmit();'>
    <input type='text' name='aaa' />
    <input type='submit' name='submit' value='서브밋' />
</form>

<script>
   function frmsubmit() {

   if ( a.value == '') {
      alert('aaa가 없어요');
       return false;
   }

   return true;
 }
</script>



틀린 예
input type='submit'을 누르면 submit이 동작하는데 onsubmit이 return false;라 아무 반응이 안일어남.

<form name='frm' method='post' actoin='./' onsubmit='return false;'>
    <input type='text' name='aaa' />
    <input type='submit' name='submit' value='서브밋' />
</form>

<script>
   function frmsubmit() {

   if ( a.value == '') {
      alert('aaa가 없어요');
       return false;
   }

   document.frm.submit();
 }
</script>

그렇다고 아래와 같이 작성하면 내부적으로 무한루프 돌거나 submit이 느리게 동작한다.
<form name='frm' method='post' actoin='./' onsubmit='frmsubmit(); return false;'>
    <input type='text' name='aaa' />
    <input type='submit' name='submit' value='서브밋' />
</form>

<script>
   function frmsubmit() {

   if ( a.value == '') {
      alert('aaa가 없어요');
       return false;
   }

   document.frm.submit();
 }
</script>

댓글
댓글쓰기 폼