[FE/JS] form태그의 자동 Keyup 이벤트 (submit) 막기

2021.03.26

11일차

 

입사 20일차.

내가 세운 기준에서 form을 사용하는 이유는 굳이 버튼을 누르지 않고, Enter키를 누르면 데이터를 submit 할 수 있기 때문이다.

<button type="submit">을 이용해서 쉽게쉽게 넘길 수 있지만, required 속성이 먹히지 않거나, 입력한 데이터를 체크 후, submit을 할때는 <button type="button">을 사용한다.

 

너무 간단하고 기초적인 내용이지만, 처음 보는 예외의 경우를 봤고 직접 경험했기 때문에 해당 내용에 대해 적는다.

 

 

<input type="text"> 가 1개일 때, Enter키를 누르면 submit이 수행된다.

<form id="exForm" name="exForm" method="POST" action="다음 페이지 링크">       <input type="hidden" name="히든1" value="히든1" />       <input type="hidden" name="히든2" value="히든2" />       <input type="hidden" name="히든3" value="히든3" />       <input type="hidden" name="히든4" value="히든4" />       <input type="hidden" name="히든5" value="히든5" />             <input type="text" name="텍스트1" value="텍스트1" />       // 버튼의 type속성이 'button'임에도 Enter키를 누르면 submit이 진행된다.       <button type="button">Submit 실행</button> </form>

  해결방법

  ① <input type="text" /> type속성이 'text'인 input 태그를 1개 더 만들어준다.

  ② onsubmit="return false" form태그의 onsubmit 속성에 'return false'를 입력해서 submit을 강제로 막는다.

  ③ <form>태그 대신 <div>태그를 이용하거나 필요한 input태그에 id를 부여한 후, JS를 이용해서 submit한다.

 

 

2. onsubmit 속성을 이용해서 submit 막기

  ① <form onsubmit="return false"> action 속성을 삭제하고, onsubmit 속성을 추가한 뒤, 'return false'를 적어준다.

  ② JavaScript로 action 속성을 부여하고, submit을 할 수 있게 만든다.

// onsubmit="return false" 를 이용해서 submit을 강제로 막을 수 있다. <form id="exForm" name="exForm" method="POST" onsubmit="return false">       <input type="hidden" name="히든1" value="히든1" />       <input type="hidden" name="히든2" value="히든2" />             <input type="text" id="exTextId" name="텍스트1" value="텍스트1" />       <button type="button">Submit 실행</button> </form> <script>       // 강제로 막은 submit을 실행할 수 있도록 JavaScript를 만들어준다.       function fn_goNextPage() {             var form = $("#mainForm")[0];             // exTextId가 빈칸인지 체크             if ( $("#exTextId").val() == '' ) {                  // 알림창 띄우기 + exTextId input 태그로 이동                  alert('텍스트1에 문자를 입력해주세요!');                   $("#exTextId").focus();                  // return false는 break와 같은 기능이다.                  return false;             }            // form 태그에 적지 않은 action속성을 부여 + submit            form.setAttribute("action", "./다음페이지 링크");            form.submit(); } </script>

  ③ 이 방법이 별로거나 적용할 수 없는 상황이라면, 동적 form을 생성하는 JavaScript를 확인해보자. (링크)

 

 

코드를 열어보기 전엔 당연히 <button type="submit"> 이겠지~ 하고 쉽게 생각했는데, type="text"가 1개일 때 자동으로 submit이 진행된다는 사실을 처음 알게되었다. 다른 회사에서 개발한 기존 프로그램에 추가 개발을 진행한다는 것은 여러모로 고민할 점이 많다는 것을 다시 한 번 느꼈다.