JavaScript, form, return에 관한 이야기

예전에 네이버가 Open API를 선보였을때 Ajax를 이용해서 간단하게 만들어 본 적이 있습니다.
(관련 포스트 : Naver Open API & Ajax)

제법 오래된 이야기라서 기억속에서 사리지고 있었는데..
어느날 방명록에서 이와 관련된 질문을 주는 글을 만났습니다.

아주 가끔 이러한 글을 만나게 되는데..
이제 무언가를 시작하는 분들에게 참고자료가 될 수 있다는 생각에 기분이 들뜨게 되고,
조악한 프로그램 실력에 부끄러워 지기도 합니다.
그래도 참 즐거운 일이라고 생각합니다.

예전에 만들어던 페이지에서 엔터처리를 하지 않았습니다.
질문은 엔터가 forum submit()으로 잘 이루어 지지 않는다는 것이였습니다.
IE와 FF의 호환성문제를 이야기 하시는 줄 알고 이전 포스팅을 드렸는데 그 이야기가 아니였습니다.
(관련 포스트 : 파이어폭스, G마켓, 그리고 JavaScript event)

천천히 살펴보니 질문의 요지는 form문에서 마지막으로 남은 객체에서의 이벤트처리에 관한 것이였습니다.
이런 문제는 웹 프로그램을 하다보면 꼭 한번 쯤은 만나게 되는 일입니다. ^^

우선 제가 만들었던 이전 소스는 이런 형식이였습니다.

<script ..>
    f_submit() {
      // ajax를 이용하여 검색결과 가져오고, 화면에 보여주기
    }

    function checkEvent(ev) {
       if( 만약 엔터라면) {
          f_submit();
       }
    }
</script>
<form name="k">
    <input type="hidden" name="" value="">
   <input type='text' onkeydown="JavaScript:checkEvent(event);">
</form>

실제로 이런 형식으로 코드를 만드시면 엔터를 입력하셨을 경우 폼이 submit()되는 현상을 만나시게 됩니다.
주소창를 보시면 금세 알아차리실 수 있습니다. 이러한 일이 벌어지는 이유는 일종의 약속때문입니다.
"가장 마지막 객체에서 엔터가 입력되면 그건 forum submit를 의미한다"
실제로 폼을 입력하실때 특별한 처리를 하지 않아도 'Tab'를 누르면 객체들을 하나씩 넘어가는 것을 보실 수 있습니다. 그것 또한 암묵적인 약속같은 거죠 ^^

이유를 알았으니 이제 처리를 해야겠죠..
가장 일반적인 속임수는 안보이는 객체를 넣어서 <input type="text ... >이 마지막 객체가 되지 않도록 하는 것입니다. 가령 <input type="text" style="display:none"> 이런 식으로 밑에 포함에 준다면 이제는 정상적으로 작동하는 것을 보실 수 있습니다. 개인적으로는 추천하고 싶지는 않습니다. ^^

다른 방법은 javascript의 return문을 이용하는 것입니다.
폼문을 이렇게 변경해 주시면 됩니다.
<form name="searchForm" onsubmit="javascript:return false;">
음.. 조금 더 세련된 느낌이네요 ^^

이쯤되면 javascript에서 사용되는 return문에 대한 이해를 조금 하고 넘어가는 것이 좋을 것 같습니다.
가끔 보면 javascript 코드 이곳 저곳에 'return false', 'return true'등을 넣는 분들이 있습니다.
아무 이유없이 말이죠.. 그래서 흰 화면에 'true', 'false'와 같은 글씨를 만나기도 합니다.

return은 크게 두가지로 사용하실 수있습니다.
하나는 함수를 정지시키는 목적입니다. 보통 폼검사를 하다가 alert()를 하고 focus()를 하고 return하는 코드를 보게됩니다. 이런 경우가 함수를 정지시킬 목적으로 사용하는 return입니다.

또 하나는 정말고 무언가를 함수를 호출한 녀석에게 전달할 목적으로 사용합니다.
무언가를 하고 결과값를 호출한 함수에게 돌려주는 것이죠. 그러면 결과값을 돌려받은 함수는 그 값을 가지고 우언가 다른 일을 하게 됩니다.

위에서는 마지막객체에서 엔터를 치는 경우 폼이 submit되는 경우를 막기 위해서 폼에 submit event에 return문을 사용하였습니다.

질문하신 분이 확인하실 수 있도록 이전 소스를 수정하였습니다.
이제 그 녀석은 'Enter'도 먹는 서비스 입니다.
한 단계 업그레이드를 할 수 있도록 도와주신 분께.. 감사드립니다. ^^