티스토리 뷰


요런식으로 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();는 이벤트의 동작을 멈추게 하는 함수이다.


저작자 표시 비영리
신고
댓글
댓글쓰기 폼