[JS] 스크립트 form submit (onclick)

 

체크박스로 검색 만들때 유용한 스크립트이다.
체크 하면 체크된 value 값이 파라미터로 넘어가서 쿼리에 조건 검색으로 들어가게 만들었다.
쿼리로 넘어가는 소스는 생략하고 HTML과 SCRIPT 위주로 메모하려고 한다.

---

프로젝트 특성상 모든 소스는 JSP로 구현되어 있고, keword는 따로 검색하는 부분에서 필요하여 작성하였다.
* 먼저 파라미터 불러오기

<%
String keyword = parseNull(request.getParameter("keyword"));	
String CateAll = parseNull(request.getParameter("CateAll"));	
String Cate1 = parseNull(request.getParameter("Cate1"));
String Cate2 = parseNull(request.getParameter("Cate2"));
String Cate3 = parseNull(request.getParameter("Cate3"));
String Cate4 = parseNull(request.getParameter("Cate4"));
String Cate5 = parseNull(request.getParameter("Cate5"));
String Cate6 = parseNull(request.getParameter("Cate6"));
String Cate7 = parseNull(request.getParameter("Cate7"));
String Cate8 = parseNull(request.getParameter("Cate8"));
%>

 

jsp

* cate는 뒤에 숫자로 반복된다. 반복문을 돌려 중복을 최소화 하였다.

<form name="frm1" id="frm1" action="/webUrl" method="get">
	<p>
		<%
		String[] categories = {"카테1", "카테2", "카테3", "카테4", "카테5", "카테6", "카테7", "카테8"};
		List<String> busiCategories = new ArrayList<>();
		for (int i = 1; i <= categories.length; i++) {
		    busiCategories.add(parseNull(request.getParameter("Cate" + i)));
		}
		int numOfCheckboxes = categories.length +1;
		for (int i = 1; i < numOfCheckboxes; i++) {
		    String parameterValue = busiCategories.get(i - 1) != null ? busiCategories.get(i - 1) : ""; // 인덱스 수정
		%>
			<input type="checkbox" id="Cate<%= i %>" name="Cate" value="Y"
			<% if(busiCategories.get(i - 1) != null && busiCategories.get(i - 1).equals("Y")) { %> checked <% } %>
					onclick="updateCheckboxValue('Cate<%= i %>','busi')"/>
			<label for="Cate<%= i %>" style="display: inline;" class="<%= Categories.get(i - 1).equals("Y") ? "on" : "" %>
				<%=categories[i - 1].equals("카테1") ? "category cr03":""%>
				<%=categories[i - 1].equals("카테2") ? "category cr02":""%>
				<%=categories[i - 1].equals("카테3") ? "category cr05":""%>
				<%=categories[i - 1].equals("카테4") ? "category cr06":""%>
				<%=categories[i - 1].equals("카테5") ? "category cr07":""%>
				<%=categories[i - 1].equals("카테6") ? "category cr01":""%>
				<%=categories[i - 1].equals("카테7") ? "category cr04":""%>
				<%=categories[i - 1].equals("카테8") ? "category cr08":""%>"
				><%= categories[i - 1] %>
			</label>
		<%
		}
		%>
		<input type="checkbox" id="CateAll" name="Cate" value="Y" onclick="updateCheckboxValue('CateAll','busi')"/>
		<label for="CateAll" style="display:inline;">선택초기화</label>
	</p>
	<fieldset class="field_type2" style="float:left;">
		<div class="srh_inp_wrap">
			<label for="keyword" class="blind">검색어 입력</label>
			<input name="keyword" id="keyword" type="text" class="input_text" title="검색어 입력" value="<%=keyword%>" placeholder="키워드 검색">
			<label for="searchSubmit" class="blind">검색 버튼</label>
			<input type="submit" id="searchSubmit" value="검색">
		</div>
	</fieldset>  
	<input type="hidden" name="Cate1" value="<%=Cate1%>" />
	<input type="hidden" name="Cate2" value="<%=Cate2%>" />
	<input type="hidden" name="Cate3" value="<%=Cate3%>" />
	<input type="hidden" name="Cate4" value="<%=Cate4%>" />
	<input type="hidden" name="Cate5" value="<%=Cate5%>" />
	<input type="hidden" name="Cate6" value="<%=Cate6%>" />
	<input type="hidden" name="Cate7" value="<%=Cate7%>" />
	<input type="hidden" name="Cate8" value="<%=Cate8%>" />
</form>

 

체크박스를 선택할 때 파라미터가 Y로 변경되고, 해제하면 풀리게 된다.
선택초기화를 누르면 기존에 선택된 체크박스가 모두 해제된다.

---

script

<script>
    function updateCheckboxValue(id, type) {
        var checkbox = document.getElementById(id);
        var CateList = document.querySelectorAll('input[name^=Cate][type=hidden]:not([name=CateAll])');

        if(id === 'CateAll'){
            if (checkbox.checked) {
                CateList.forEach(function(target){
                    target.value = '';
                });
            }
        }else if(id.indexOf('Cate') > -1){
            if (checkbox.checked) {
                CateList.forEach(function(target){
                    if(id === target.name){
                        target.value = 'Y';
                    }
                    // 중복검색 아닌 단일 검색일 때 다른 value눈 Y를 없앤다
                    // else{
                    //     target.value = '';
                    // }
                });

            }else{
                CateList.forEach(function(target){
                    if(id === target.name){
                        target.value = '';
                    }
                });
            }

        }
        document.querySelector('#frm1').submit();
    }
</script>

 

체크박스를 선택하게되면 updateCheckboxValue() 함수가 실행된다.
CateAll를 누르면 전체 선택해제가 되며, Cate 들을 선택하면 각 선택한 체크박스가 선택된다.
form으로 넘어가며 파라미터로 값을 받을 수 있다. 

---

script로 form submit으로 가는 방법을 몰라서 정규화로 파라미터를 각 넣은뒤 url에 넣고 새로고침되도록 만들었었는데...
submit으로 넘기면 아주 간단하게 구현된다..
역시 많이 해봐야 어떤 방식으로 구현이 가능한지 알 수 있는 것 같다.

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)