[jQuey]form과 ajax / form submit 막기 / onsubmit="return false;"

[jQuey] form과 ajax / onsubmit / 자동클릭(trigger)

 

게시판을 개발하다 보면 (이외 다른 것에도 ), 검색박스에 찾고자 하는 keyword를 입력 후

검색을 해야 할 경우가 꼭 (늘상….) 있다.

 

방법은

1) 검색버튼을 직접 클릭하거나

2) 검색 input 박스에서 enter키 누르거나

 

필자는 두 방법을 다 개발하는데 , 소스 버전업 중

2)번에 대한 case를 수정개발하다 이상한 현상(?)을 발견했다.

 

 

$('#keywordBox').keydown(function(e) {

           if (e.keyCode == '13') {

                      $('#boardSearchBtn').trigger('click');

           }

});

 

//검색

$('#boardSearchBtn').on('click',function (){

           _this.keytype = $("#keytypeSelectBox").val();

           _this.keyword = $("input#keywordBox").val();

           _this.getBoardPopList();

});

 

다음과 같이 keydown 이벤트로 enter키가 입력되면 자동으로 버튼이 검색되는 것처럼

구현하였다.  à trigger 사용

 

근데 getBoardPopList()가 두번이  호출되는게 아닌가? ㅠ,ㅠ

 

알고보니 퍼블리싱에 <form> 태그가 있었다.

enter키가 눌려지는 순간 해당 이벤트와 함께, form의 submit()이 작동되었기 때문이다.

따라서 submit()에 의해 페이지가 새로고침 되었기 때문이었다………………

 

 

[결론] 1. enter키 evt에 form의 submit 이벤트가 작동하는 것 같다. 2. form을 인위적으로 막으려면 onsubmit="return false;" 을 사용하면 된다. <form name="frm_act_boardPopList" id="frm_act_boardPopList" method="post" onsubmit="return false;">

 

p.s )

form방식 보내기

 $('#formid값').serialize();

 $('#formid값').serializeArray();