[HTML] button onclick event가 먹지 않을 때

[HTML]

<form id="searchForm" name="searchForm">
	<table>
    	<tr>
        	<td>
            	<p>검색어</p>
                <div>
                	<select name="searchType">
                    	<option>이름</option>
                        <option>휴대폰번호</option>
                        <option>생일</option>
                    </select>
                </div>
                <div>
                	<input type="text" name="searchWord"/>
                </div>
            </td>
            <td>
            	<div>
                	<ul>
                    	<li><button onclick="clear();">초기화</button></li>
                        <li><button onclick="search();">검색</button></li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</form>

 

[jQuery]

var $searchForm = $("#searchForm");

//Enter Event(Search)
$searchForm.find("input").keydown(function(e) {
	if(e.keyCode == 13) search();
});

search = function() {
	$searchForm.attr({"action":"/search", "target":"_self", "method":"post"}).submit();
};

clear = function() {
	$searchForm.find("select").find("option:eq(0)").prop("selected", true);
	$searchForm.find("input[type=text]").val("");
    search();
};

 

** 문제) 엔터를 누르면 검색이 아니라 검색옵션이 초기화되면서 검색이 안됨.

- 처음엔 form 태그 안에 초기화/검색 버튼이 있어서 전부 다 submit이 되는 건줄 알고 form 태그를 버튼 영역 위로 올려봤는데, 테이블 영역 안엔 <thead>, <tfoot>, <tbody>, <tr>, <th>, <td> 테이블 속성 외엔 들어갈 수 없음.

 

** 해결) 문제는 버튼 속성 안에 type="button"을 넣지 않아서였다.

(그래서 Enter Event가 아니라 버튼의 첫번째인 초기화가 된 것)

<!-- 버튼 작성법 -->
<button type="button" onclick="clear();">초기화</button>
<button type="button" onclick="search();">검색</button>