input type 엔터키 서브밋 되는 현상

 

요런식으로 input text에 값 넣고 검색하는 화면을 만들었다.

 

 

'검색' 버튼에 onclick 이벤트를 주고

onclick이 되면 파라미터들을 좀 더 채워넣어서 submit을 스크립트 함수에서 시키도록 했다.

 

function search() {
    $('#search_form').append('<input type="hidden" id="search_type" name="search_type" 
    value="'+ searchType + '" />').submit();
}

 

뭐 이런식으로?

 

 

마우스로 검색 버튼을 클릭했을 땐 잘 동작했다.

 

그런데 text에 값을 넣고 엔터를 치면 search() 함수에 들어오지 않고 바로 서브밋이 돼서 서버로 가는 것이었다.

 

 

검색 결과 아래 블로그에 잘 나와있었다.

https://blog.outsider.ne.kr/292

 

 

input type text가 1개만 존재하면 바로 서브밋이 된다는 내용이다. 

(이유는 모름.. 브라우저들이 그렇게 처리한다고 함)

 

 

 

나는 엔터로도 검색이 먹혀야 하기 때문에 이렇게 해결했다.

$('#search_form').submit(function (e) {
 $('#search_form').append('<input type="hidden" id="search_type" name="search_type" value="'+ searchType + '" />');
        // submit() 호출하지 않아도 함수가 끝나면 수행 완료됨
});

 

 

* 참고로 검색 버튼은 type="submit" 으로 설정한다.

 

 

만약 submit을 아예 동작시키고 싶지 않으면

submit 함수 내에서 return false; 또는

e.preventDefault(); 를 수행한다.

 

e.preventDefault();는 이벤트의 동작을 멈추게 하는 함수이다.