[HTML] Form 자동 Submit 막기

html에서 form을 만들때 가장 쉽게 실수 하는 부분이 submit에 대한 것입니다.

모든 전처리를 서버에서 하는 경우에는 문제가 되지 않지만, javascript내에서 전처리르 하게 하는 경우에는

이 부분이 오작동을 일으키기도 합니다.

 

<form name="editForm">
    <input type="text" name="keyword"/>
</form>

 

다음과 같이 html소스가 되어있다고 가정하고, 해당 파일이 http://localhost:8080/main.html 이라고 가정하였을 때,

다음과 같은 입력창이 하나 생성됩니다.

여기에 아무 텍스트나 입력하고 엔터를 치게 되면, 어떻게 될까요?

결론부터 말하면 아래와 같이 호출되게 됩니다.

 

http://localhost:8080/main.html?keyword=

 

두 가지 방법이 있는데

 

  javascript에서 막는 방법 (jQuery 기준)

$("[name=editForm] input").keydown(function(e){
    if(e.keyCode == 13){
        return false;
    }
});

위와 같은 경우 editForm의 모든 input에서 엔터를 막게된다

 

  form에서 action을 막는 경우

<form name="editForm" action="javascript://">
    <input type="text" name="keyword"/>
</form>

submit될 주소를 javascript로 막아둠으로써 submit을 막을수 있습니다.