form태그 ajax시 submit 이벤트 막기

안녕하세요. 오늘은 게시판을 개발할때, 키워드를 입력해서 검색을 하는 경우가 있습니다. 또한, 로그인 폼 개발 시 아이디 및 패스워드를 입력 후 로그인 해야합니다. 

이럴 때 해당 키워드, 아이디 및 패스워드를 입력 후 직접 마우스를 사용하여 (검색 및 로그인)을 하거나 엔터(Enter)를 쳐서 (검색 및 로그인) 을 합니다.

기본적으로 개발을 진행하다 보면 두 가지 경우를 다 처리해야 되는 상황이 대부분입니다. 그러나 개발을 진행하다 보니 enter키 처리 상황에서 이상한 점을 발견하게 되었습니다. 그 현상은 enter키를 눌렀을 때, ajax를 통해 form의 정보를 가지고 submit이 작동하게 되면 화면이 reload 되는 현상입니다.

 

우선 간단한 예제를 통해서 확인해보도록 하겠습니다.

$("#btnSearch").click(function(e) {
  // 검색 값 체크
  var params = $("#searchForm").serialize();

  $.post("/toma/testList/checkBoardValue", params, function(data) {
    if(data == "success") {
      alert("성공적으로 검색되었습니다.");
    } else {
      alert("검색 값이 잘못되었습니다.");
      return false;
    }
  });
});

그리고 검색 시 Enter처리를 위해 trigger를 사용해서 다음과 같이 btnSearch에 적용해줍니다.

$("#btnSearch").keyup(function(event) {
  // Enter 처리
  if (event.keyCode == '13') {
    $("btnSearch").trigger("click");
  };
});

위의 코드에서 13은 enter의 아스키 코드 값입니다. keyup을 통해서 enter키가 눌리고 떼어졌을 때 버튼이 검색되는 것처럼 구현했습니다.

그리고 event.keyCode == '13' 대신에 event.which == 13을 써도 무방합니다.

다음과 같이 검색 Enter 처리를 했지만, 엔터 키가 눌려지는 순간 해당 이벤트와 함께 form의 submit()이 작동되어서 페이지가 '새로고침'되는 현상이 발생하게 되었습니다.

이러한 현상을 방지하기 위해서 다음과 같이 form 태그에 onsubmit="return false;"를 적용해 줍니다.

  //  검색 폼
  
  // 이하 생략..

그러면, 새로고침 되는 현상이 방지되는 것을 확인해 볼 수 있습니다.

처음에 이 문제를 해결하기 위해서 꽤 많은 시간을 낭비한 것 같습니다. 다음에 이와 같은 문제가 발생했을 때 참고를 해서 사용해야겠습니다. 이상으로 오늘의 포스팅은 마치도록 하겠습니다. :)